@extends('layouts.app')
@section('title', 'Create Post')

@section('breadcrumb')
    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <a href="{{ route('admin.posts.index') }}">Posts</a>
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M9 18l6-6-6-6"/></svg>
    <span>Create</span>
@endsection

@push('styles')
<style>
    /* Layout: main details on the left, quota panel on the right (stacks on narrow). */
    .post-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
    @media (min-width: 992px) { .post-form-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

    /* Field grid inside the main details card. CSS-grid replaces the old
       Bootstrap row/col system so we lose the global grid CSS dependency
       and gain better gap control. */
    .field-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 14px; }
    .col-12 { grid-column: span 12; }
    .col-6  { grid-column: span 12; }
    .col-4  { grid-column: span 12; }
    .col-3  { grid-column: span 12; }
    @media (min-width: 720px) {
        .col-6 { grid-column: span 6; }
        .col-4 { grid-column: span 4; }
        .col-3 { grid-column: span 3; }
    }

    /* Quota row card — repeating chunk in the right panel. */
    .quota-row {
        position: relative;
        padding: 12px 12px 10px;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        background: var(--bg-surface-2);
        margin-bottom: 10px;
    }
    .quota-row + .quota-row { margin-top: 0; }
    .quota-remove {
        position: absolute; top: 6px; right: 6px;
        width: 22px; height: 22px;
        border-radius: 50%;
        border: 0;
        background: var(--danger-500); color: #fff;
        cursor: pointer;
        display: inline-flex; align-items: center; justify-content: center;
        line-height: 1;
    }
    .quota-row .form-label { font-size: 12px; }
    .quota-row .form-control, .quota-row .form-select { height: 36px; font-size: 13px; }

    .quota-totals { font-size: 12.5px; color: var(--text-tertiary); }
    .quota-totals strong { color: var(--text-primary); font-family: 'JetBrains Mono', monospace; font-weight: 700; }

    /* Toggle row for the exam-login switch. */
    .switch-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: var(--r-md); }
    .switch-row .form-text { margin: 4px 0 0; }
</style>
@endpush

@section('content')

<div class="page-header">
    <div>
        <h1 class="page-header-title">Create new post</h1>
        <p class="page-header-sub">Fill in the recruitment-post details and define quota allocations.</p>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.posts.index') }}" class="btn btn-secondary btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
            Back
        </a>
    </div>
</div>

<form method="POST" action="{{ route('admin.posts.store') }}" id="postForm" novalidate>
    @csrf

    <div class="post-form-grid">

        {{-- ── Main details ────────────────────────────────────────── --}}
        <section class="section-card">
            <header class="section-card-header">
                <h2 class="section-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V4a2 2 0 012-2h4a2 2 0 012 2v3"/></svg>
                    Post details
                </h2>
            </header>
            <div class="section-card-body">
                <div class="field-grid">

                    <div class="form-group col-6" style="grid-column: span 12;">
                        <label class="form-label" for="title">Post title <span class="form-required">*</span></label>
                        <input type="text" id="title" name="title"
                               class="form-control @error('title') is-invalid @enderror"
                               value="{{ old('title') }}" placeholder="e.g. Junior Clerk" required>
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-6">
                        <label class="form-label" for="codeInput">Post code <span class="form-required">*</span></label>
                        <input type="text" id="codeInput" name="code"
                               class="form-control @error('code') is-invalid @enderror"
                               value="{{ old('code') }}" placeholder="e.g. JC" maxlength="20"
                               style="text-transform: uppercase; font-family: 'JetBrains Mono', monospace;" required>
                        <div class="form-text">Letters and numbers only. Unique per post.</div>
                        @error('code')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-6">
                        <label class="form-label" for="bps">BPS / Pay scale <span class="form-required">*</span></label>
                        <input type="text" id="bps" name="bps"
                               class="form-control @error('bps') is-invalid @enderror"
                               value="{{ old('bps') }}" placeholder="e.g. BPS-11 or 14,000–20,000" required>
                        @error('bps')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-3">
                        <label class="form-label" for="totalSeats">Total seats <span class="form-required">*</span></label>
                        <input type="number" id="totalSeats" name="total_seats"
                               class="form-control @error('total_seats') is-invalid @enderror"
                               value="{{ old('total_seats') }}" min="1" max="10000" required>
                        @error('total_seats')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-3">
                        <label class="form-label" for="status">Status <span class="form-required">*</span></label>
                        <select id="status" name="status" class="form-select @error('status') is-invalid @enderror" required>
                            <option value="draft"  {{ old('status', 'draft') === 'draft'  ? 'selected' : '' }}>Draft</option>
                            <option value="active" {{ old('status') === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="closed" {{ old('status') === 'closed' ? 'selected' : '' }}>Closed</option>
                        </select>
                        @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-4">
                        <label class="form-label" for="min_age">Min age <span class="form-required">*</span></label>
                        <input type="number" id="min_age" name="min_age"
                               class="form-control @error('min_age') is-invalid @enderror"
                               value="{{ old('min_age', 18) }}" min="18" max="60" required>
                        @error('min_age')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-4">
                        <label class="form-label" for="max_age">Max age <span class="form-required">*</span></label>
                        <input type="number" id="max_age" name="max_age"
                               class="form-control @error('max_age') is-invalid @enderror"
                               value="{{ old('max_age', 35) }}" min="18" max="60" required>
                        @error('max_age')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-4">
                        <label class="form-label" for="gender_eligibility">Gender eligibility <span class="form-required">*</span></label>
                        <select id="gender_eligibility" name="gender_eligibility" class="form-select @error('gender_eligibility') is-invalid @enderror" required>
                            <option value="both"   {{ old('gender_eligibility', 'both') === 'both' ? 'selected' : '' }}>Both</option>
                            <option value="male"   {{ old('gender_eligibility') === 'male'   ? 'selected' : '' }}>Male only</option>
                            <option value="female" {{ old('gender_eligibility') === 'female' ? 'selected' : '' }}>Female only</option>
                        </select>
                        @error('gender_eligibility')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-12" style="grid-column: span 12;">
                        <label class="form-label" for="description">Description <span class="form-text" style="font-weight:400;">(optional)</span></label>
                        <textarea id="description" name="description" rows="3"
                                  class="form-control @error('description') is-invalid @enderror"
                                  placeholder="Brief overview of the post…">{{ old('description') }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group col-12" style="grid-column: span 12;">
                        <label class="form-label" for="qualification">Qualification requirements <span class="form-required">*</span></label>
                        <textarea id="qualification" name="qualification" rows="4"
                                  class="form-control @error('qualification') is-invalid @enderror"
                                  placeholder="Minimum education, certifications, experience…" required>{{ old('qualification') }}</textarea>
                        @error('qualification')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="col-12" style="grid-column: span 12;">
                        <div class="switch-row">
                            <div style="display:flex; align-items:center;">
                                <input type="hidden" name="exam_login_enabled" value="0">
                                <input type="checkbox" id="examLoginEnabled" name="exam_login_enabled" value="1"
                                       style="width:18px; height:18px; cursor:pointer;"
                                       {{ old('exam_login_enabled') ? 'checked' : '' }}>
                            </div>
                            <div style="flex:1; min-width:0;">
                                <label class="form-label" for="examLoginEnabled" style="margin:0;">Enable exam login for this post</label>
                                <div class="form-text">When enabled, approved candidates can log into the exam portal using their roll number and exam password. Keep disabled until the exam window opens.</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>

        {{-- ── Quota allocation panel ──────────────────────────────── --}}
        <section class="section-card" style="position:sticky; top:88px; align-self:start;">
            <header class="section-card-header">
                <h2 class="section-card-title">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15.5A2.5 2.5 0 0118.5 18H5.5A2.5 2.5 0 013 15.5V8.5A2.5 2.5 0 015.5 6h13A2.5 2.5 0 0121 8.5z"/><path d="M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2"/></svg>
                    Quota allocation
                </h2>
                <button type="button" id="addQuotaBtn" class="btn btn-ghost btn-sm">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
                    Add
                </button>
            </header>
            <div class="section-card-body" style="padding:14px;">

                @error('quotas')
                    <div class="form-error" style="margin:0 0 10px;">{{ $message }}</div>
                @enderror

                <div id="quotaContainer">
                    @if(old('quotas'))
                        @foreach(old('quotas') as $i => $quota)
                        <div class="quota-row">
                            <button type="button" class="quota-remove" aria-label="Remove this quota row">×</button>
                            <div class="form-group" style="margin-bottom:8px;">
                                <label class="form-label">Quota type</label>
                                <select name="quotas[{{ $i }}][quota_type]"
                                        class="form-select quota-type @error('quotas.'.$i.'.quota_type') is-invalid @enderror"
                                        required>
                                    <option value="">— Select —</option>
                                    <option value="open_merit" {{ ($quota['quota_type'] ?? '') === 'open_merit' ? 'selected' : '' }}>Open Merit</option>
                                    <option value="female"     {{ ($quota['quota_type'] ?? '') === 'female'     ? 'selected' : '' }}>Female (Special)</option>
                                    <option value="disabled"   {{ ($quota['quota_type'] ?? '') === 'disabled'   ? 'selected' : '' }}>Disabled (PWD)</option>
                                    <option value="minority"   {{ ($quota['quota_type'] ?? '') === 'minority'   ? 'selected' : '' }}>Minority</option>
                                    <option value="district"   {{ ($quota['quota_type'] ?? '') === 'district'   ? 'selected' : '' }}>District</option>
                                </select>
                            </div>
                            <div class="district-field form-group" style="margin-bottom:8px; {{ ($quota['quota_type'] ?? '') === 'district' ? '' : 'display:none;' }}">
                                <label class="form-label">District name</label>
                                <input type="text" name="quotas[{{ $i }}][district_name]"
                                       class="form-control"
                                       value="{{ $quota['district_name'] ?? '' }}"
                                       placeholder="e.g. Lahore">
                            </div>
                            <div class="form-group">
                                <label class="form-label">Seats</label>
                                <input type="number" name="quotas[{{ $i }}][seats]"
                                       class="form-control quota-seats"
                                       value="{{ $quota['seats'] ?? '' }}"
                                       min="1" placeholder="0" required>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>

                <div id="noQuotaMsg" class="form-text {{ old('quotas') ? '' : '' }}"
                     style="text-align:center; padding:14px 6px; {{ old('quotas') ? 'display:none;' : '' }}">
                    No quotas added yet. Click <strong>Add</strong> to define quota allocations.
                </div>

                <div style="border-top:1px solid var(--border); margin-top:8px; padding-top:10px; display:flex; flex-direction:column; gap:4px;">
                    <div class="quota-totals" style="display:flex; justify-content:space-between;">
                        <span>Quota total</span>
                        <strong id="quotaSeatSum">0</strong>
                    </div>
                    <div class="quota-totals" style="display:flex; justify-content:space-between;">
                        <span>Post seats</span>
                        <strong id="totalSeatDisplay">0</strong>
                    </div>
                    <div id="quotaWarning" class="form-error" style="display:none; margin-top:6px;">
                        Quota seats exceed total post seats!
                    </div>
                </div>

            </div>
        </section>

    </div>

    <div style="margin-top:18px; display:flex; gap:8px;">
        <button type="submit" class="btn btn-primary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
            Create post
        </button>
        <a href="{{ route('admin.posts.index') }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>

{{-- Quota row template (cloned by JS when admin clicks "Add"). --}}
<template id="quotaRowTemplate">
    <div class="quota-row">
        <button type="button" class="quota-remove" aria-label="Remove this quota row">×</button>
        <div class="form-group" style="margin-bottom:8px;">
            <label class="form-label">Quota type</label>
            <select name="" class="form-select quota-type" required>
                <option value="">— Select —</option>
                <option value="open_merit">Open Merit</option>
                <option value="female">Female (Special)</option>
                <option value="disabled">Disabled (PWD)</option>
                <option value="minority">Minority</option>
                <option value="district">District</option>
            </select>
        </div>
        <div class="district-field form-group" style="margin-bottom:8px; display:none;">
            <label class="form-label">District name</label>
            <input type="text" name="" class="form-control" placeholder="e.g. Lahore">
        </div>
        <div class="form-group">
            <label class="form-label">Seats</label>
            <input type="number" name="" class="form-control quota-seats" min="1" placeholder="0" required>
        </div>
    </div>
</template>

@endsection

@push('scripts')
<script>
(function () {
    var quotaIndex = {{ old('quotas') ? count(old('quotas')) : 0 }};

    function updateNames() {
        $('#quotaContainer .quota-row').each(function (i) {
            $(this).find('.quota-type').attr('name', 'quotas[' + i + '][quota_type]');
            $(this).find('input[type=text]').attr('name', 'quotas[' + i + '][district_name]');
            $(this).find('.quota-seats').attr('name', 'quotas[' + i + '][seats]');
        });
        quotaIndex = $('#quotaContainer .quota-row').length;
    }

    function updateSeatCount() {
        var sum = 0;
        $('.quota-seats').each(function () {
            sum += parseInt($(this).val()) || 0;
        });
        var total = parseInt($('#totalSeats').val()) || 0;
        $('#quotaSeatSum').text(sum);
        $('#totalSeatDisplay').text(total);
        $('#quotaWarning').toggle(sum > total && total > 0);
    }

    function addQuotaRow() {
        var tpl = $('#quotaRowTemplate')[0].content.cloneNode(true);
        var $row = $(tpl).find('.quota-row');

        $row.find('.quota-type').attr('name', 'quotas[' + quotaIndex + '][quota_type]');
        $row.find('input[type=text]').attr('name', 'quotas[' + quotaIndex + '][district_name]');
        $row.find('.quota-seats').attr('name', 'quotas[' + quotaIndex + '][seats]');
        quotaIndex++;

        $('#quotaContainer').append($row);
        $('#noQuotaMsg').hide();
        bindRowEvents($('#quotaContainer .quota-row').last());
        updateSeatCount();
    }

    function bindRowEvents($row) {
        $row.find('.quota-remove').on('click', function () {
            $row.remove();
            updateNames();
            updateSeatCount();
            if ($('#quotaContainer .quota-row').length === 0) {
                $('#noQuotaMsg').show();
            }
        });

        $row.find('.quota-type').on('change', function () {
            if ($(this).val() === 'district') {
                $row.find('.district-field').show();
                $row.find('input[type=text]').attr('required', true);
            } else {
                $row.find('.district-field').hide();
                $row.find('input[type=text]').removeAttr('required').val('');
            }
        });

        $row.find('.quota-seats').on('input', updateSeatCount);
    }

    // Bind existing rows (re-populated from old() after a validation failure).
    $('#quotaContainer .quota-row').each(function () {
        bindRowEvents($(this));
    });

    $('#addQuotaBtn').on('click', addQuotaRow);
    $('#totalSeats').on('input', updateSeatCount);

    // Force-uppercase the post code as the admin types.
    $('#codeInput').on('input', function () {
        this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
    });

    updateSeatCount();
})();
</script>
@endpush