@extends('layouts.app')
@section('title', 'Edit Post — ' . $post->code)

@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>
    <a href="{{ route('admin.posts.show', $post) }}">{{ $post->code }}</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>Edit</span>
@endsection

@push('styles')
<style>
    .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 { 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 {
        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; }

    .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">
            Edit post
            <span class="status-pill s-neutral cell-mono" style="vertical-align:middle; font-size:12px; margin-left:4px;">{{ $post->code }}</span>
        </h1>
        <p class="page-header-sub">Update the post details and quota allocations.</p>
    </div>
    <div class="page-header-actions" style="display:flex; gap:8px;">
        <a href="{{ route('admin.posts.show', $post) }}" class="btn btn-secondary btn-sm">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
            View
        </a>
        <a href="{{ route('admin.posts.index') }}" class="btn btn-ghost 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.update', $post) }}" id="postForm" novalidate>
    @csrf
    @method('PUT')

    <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" 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', $post->title) }}" 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', $post->code) }}" maxlength="20"
                               style="text-transform: uppercase; font-family: 'JetBrains Mono', monospace;" required>
                        <div class="form-text">Letters and numbers only.</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', $post->bps) }}" 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', $post->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', $post->status) === 'draft'  ? 'selected' : '' }}>Draft</option>
                            <option value="active" {{ old('status', $post->status) === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="closed" {{ old('status', $post->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', $post->min_age) }}" 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', $post->max_age) }}" 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', $post->gender_eligibility) === 'both'   ? 'selected' : '' }}>Both</option>
                            <option value="male"   {{ old('gender_eligibility', $post->gender_eligibility) === 'male'   ? 'selected' : '' }}>Male only</option>
                            <option value="female" {{ old('gender_eligibility', $post->gender_eligibility) === 'female' ? 'selected' : '' }}>Female only</option>
                        </select>
                        @error('gender_eligibility')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" 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">{{ old('description', $post->description) }}</textarea>
                        @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div class="form-group" 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" required>{{ old('qualification', $post->qualification) }}</textarea>
                        @error('qualification')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>

                    <div 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', $post->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.
                                    @if($post->exam_login_enabled && $post->exam_login_enabled_at)
                                        <strong style="color: var(--success-700);">Currently enabled since {{ $post->exam_login_enabled_at->format('d M Y, h:i A') }}.</strong>
                                    @else
                                        <strong style="color: var(--text-tertiary);">Currently disabled.</strong>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

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

        {{-- ── Quota allocation ────────────────────────────────────── --}}
        <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

                @php
                    $existingQuotas = old('quotas')
                        ? collect(old('quotas'))->values()
                        : $post->quotas->map(fn ($q) => [
                            'quota_type'    => $q->quota_type,
                            'district_name' => $q->district_name,
                            'seats'         => $q->seats,
                          ])->values();
                @endphp

                <div id="quotaContainer">
                    @foreach($existingQuotas 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>
                            @error('quotas.'.$i.'.quota_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </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 @error('quotas.'.$i.'.district_name') is-invalid @enderror"
                                   value="{{ $quota['district_name'] ?? '' }}"
                                   placeholder="e.g. Lahore">
                            @error('quotas.'.$i.'.district_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="form-group">
                            <label class="form-label">Seats</label>
                            <input type="number" name="quotas[{{ $i }}][seats]"
                                   class="form-control quota-seats @error('quotas.'.$i.'.seats') is-invalid @enderror"
                                   value="{{ $quota['seats'] ?? '' }}"
                                   min="1" placeholder="0" required>
                            @error('quotas.'.$i.'.seats')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>
                    @endforeach
                </div>

                <div id="noQuotaMsg" class="form-text"
                     style="text-align:center; padding:14px 6px; {{ count($existingQuotas) > 0 ? 'display:none;' : '' }}">
                    No quotas added.
                </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>
            Save changes
        </button>
        <a href="{{ route('admin.posts.show', $post) }}" class="btn btn-secondary">Cancel</a>
    </div>
</form>

<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 = {{ count($existingQuotas) }};

    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);
    }

    $('#quotaContainer .quota-row').each(function () { bindRowEvents($(this)); });
    $('#addQuotaBtn').on('click', addQuotaRow);
    $('#totalSeats').on('input', updateSeatCount);

    $('#codeInput').on('input', function () {
        this.value = this.value.toUpperCase().replace(/[^A-Z0-9]/g, '');
    });

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