@extends('layouts.adminlte')
@section('title', $voucher->exists ? 'Edit Voucher' : 'Create Voucher')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2>{{ $voucher->exists ? 'Edit Payment Voucher' : 'Create Payment Voucher' }}</h2>
    <a href="{{ route('vouchers.index') }}" class="btn btn-outline-secondary">Back</a>
</div>

<form method="POST" action="{{ $voucher->exists ? route('vouchers.update',$voucher) : route('vouchers.store') }}">
@csrf
@if($voucher->exists) @method('PUT') @endif

<div class="card">
<div class="card-header fw-bold">Voucher Details</div>
<div class="card-body">
<div class="row g-3">
    @if($voucher->exists)
    <div class="col-md-3"><label>Voucher No</label><input class="form-control" value="{{ $voucher->voucher_no }}" readonly></div>
    @endif

    <div class="col-md-3"><label class="required">Voucher Date</label><input type="date" name="voucher_date" class="form-control" value="{{ old('voucher_date', optional($voucher->voucher_date)->format('Y-m-d')) }}" required></div>

    <div class="col-md-6">
        <label class="required">Site</label>
        <select id="site_id" name="site_id" class="form-select" required>
            <option value="">Select Site</option>
            @foreach($sites as $site)
                <option value="{{ $site->id }}" @selected(old('site_id',$voucher->site_id)==$site->id)>{{ $site->name }}{{ $site->code ? ' ('.$site->code.')' : '' }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-6">
        <label class="required">Vendor</label>
        <select id="vendor_id" name="vendor_id" class="form-select" required>
            <option value="">Select Vendor</option>
            @if($voucher->vendor)
                <option value="{{ $voucher->vendor_id }}" selected>{{ $voucher->vendor->name }}</option>
            @endif
        </select>
    </div>

    <div class="col-md-6">
        <label class="required">Particular</label>
        <select id="particular_id" name="particular_id" class="form-select" required>
            <option value="">Select Particular</option>
            @if($voucher->particular)
                <option value="{{ $voucher->particular_id }}" selected>{{ $voucher->particular->name }}</option>
            @endif
        </select>
    </div>

    <div class="col-md-4"><label class="required">Amount</label><input type="number" step="0.01" min="0.01" name="amount" id="amount" class="form-control" value="{{ old('amount',$voucher->amount) }}" required></div>

    <div class="col-md-4"><label class="required">Payment Mode</label>
        <select name="payment_mode" class="form-select" required>
            @foreach(['cash'=>'Cash','bank'=>'Bank','upi'=>'UPI','cheque'=>'Cheque','other'=>'Other'] as $key=>$label)
            <option value="{{ $key }}" @selected(old('payment_mode',$voucher->payment_mode ?: 'cash')===$key)>{{ $label }}</option>
            @endforeach
        </select>
    </div>

    <div class="col-md-4"><label>Reference / Cheque No.</label><input name="reference_no" class="form-control" value="{{ old('reference_no',$voucher->reference_no) }}"></div>

    <div class="col-12"><label>Narration</label><textarea name="narration" rows="4" class="form-control" placeholder="Enter payment narration">{{ old('narration',$voucher->narration) }}</textarea></div>

    @if($voucher->exists)
    <div class="col-md-4"><label>Status</label>
        <select name="status" class="form-select">
            @foreach(['draft','posted','cancelled'] as $s)<option value="{{ $s }}" @selected($voucher->status===$s)>{{ ucfirst($s) }}</option>@endforeach
        </select>
    </div>
    @endif
</div>
</div>
<div class="card-footer d-flex justify-content-end gap-2">
<a href="{{ route('vouchers.index') }}" class="btn btn-secondary">Cancel</a>
<button class="btn btn-primary">{{ $voucher->exists ? 'Update Voucher' : 'Save Voucher' }}</button>
</div>
</div>
</form>
@endsection

@push('scripts')
<script>
$(function () {
    const oldVendor = @json(old('vendor_id', $voucher->vendor_id));
    const oldParticular = @json(old('particular_id', $voucher->particular_id));

    function loadDropdown(url, selector, selected, label) {
        const $select = $(selector);
        $select.html('<option value="">Loading...</option>').prop('disabled', true);

        $.getJSON(url)
            .done(function (items) {
                $select.html('<option value="">Select ' + label + '</option>');
                items.forEach(function(item) {
                    const text = item.code ? item.name + ' (' + item.code + ')' : item.name;
                    $select.append(new Option(text, item.id, false, String(item.id) === String(selected)));
                });
            })
            .fail(function () {
                $select.html('<option value="">Unable to load</option>');
            })
            .always(function () {
                $select.prop('disabled', false);
            });
    }

    $('#site_id').on('change', function () {
        const siteId = this.value;
        $('#vendor_id').html('<option value="">Select Vendor</option>');
        $('#particular_id').html('<option value="">Select Particular</option>');

        if (!siteId) return;

        loadDropdown('{{ url('/ajax/vendors') }}/' + siteId, '#vendor_id', null, 'Vendor');
        loadDropdown('{{ url('/ajax/particulars') }}/' + siteId, '#particular_id', null, 'Particular');
    });

    // Load existing values on edit.
    if ($('#site_id').val()) {
        loadDropdown('{{ url('/ajax/vendors') }}/' + $('#site_id').val(), '#vendor_id', oldVendor, 'Vendor');
        loadDropdown('{{ url('/ajax/particulars') }}/' + $('#site_id').val(), '#particular_id', oldParticular, 'Particular');
    }
});
</script>
@endpush