{{-- resources/views/payments/create.blade.php --}}
@extends('layouts.app')

@section('title', 'Payment Entry')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h3 class="mb-0">Payment Entry</h3>
    <a href="{{ route('payments.index') }}" class="btn btn-secondary btn-sm">Back to List</a>
</div>

@if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $err)
                <li>{{ $err }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('payments.store') }}" method="POST" class="card">
    @csrf

    <div class="card-body">
        <div class="row mb-3">

            {{-- Type --}}
            <div class="col-md-3">
                <label class="form-label">Type</label>
                <select name="type"
                        id="typeSelect"
                        class="form-select @error('type') is-invalid @enderror">
                    <option value="supplier"
                        {{ old('type','supplier') === 'supplier' ? 'selected' : '' }}>
                        To Supplier (Pay)
                    </option>

                    <option value="customer"
                        {{ old('type') === 'customer' ? 'selected' : '' }}>
                        From Customer (Receive)
                    </option>
                </select>
                @error('type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Party --}}
            <div class="col-md-3">
                <label class="form-label">Party</label>

                {{-- ✅ Hidden real submit field --}}
                <input type="hidden" name="party_id" id="party_id" value="{{ old('party_id') }}">

                {{-- Supplier select (no name attr) --}}
                <select id="supplierSelect"
                        class="form-select party-select @error('party_id') is-invalid @enderror">
                    <option value="">-- Select Supplier --</option>
                    @foreach($suppliers as $s)
                        <option value="{{ $s->id }}"
                            {{ old('party_id') == $s->id && old('type','supplier') === 'supplier' ? 'selected' : '' }}>
                            {{ $s->name }}
                            @if(isset($s->current_due))
                                (Due: {{ number_format($s->current_due, 2) }})
                            @endif
                        </option>
                    @endforeach
                </select>

                {{-- Customer select (no name attr) --}}
                <select id="customerSelect"
                        class="form-select party-select @error('party_id') is-invalid @enderror"
                        style="display:none;">
                    <option value="">-- Select Customer --</option>
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}"
                            {{ old('party_id') == $c->id && old('type') === 'customer' ? 'selected' : '' }}>
                            {{ $c->name }}
                            @if(isset($c->current_due))
                                (Due: {{ number_format($c->current_due, 2) }})
                            @endif
                        </option>
                    @endforeach
                </select>

                @error('party_id')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            {{-- Date --}}
            <div class="col-md-3">
                <label class="form-label">Date</label>
                <input type="date"
                       name="date"
                       class="form-control @error('date') is-invalid @enderror"
                       value="{{ old('date', now()->format('Y-m-d')) }}">
                @error('date')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            {{-- Method --}}
            <div class="col-md-3">
                <label class="form-label">Method</label>
                <select name="method"
                        class="form-select @error('method') is-invalid @enderror">
                    <option value="">-- Select Method --</option>
                    <option value="cash"   {{ old('method') === 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="nagad"  {{ old('method') === 'nagad' ? 'selected' : '' }}>Nagad</option>
                    <option value="bkash"  {{ old('method') === 'bkash' ? 'selected' : '' }}>bKash</option>
                    <option value="rocket" {{ old('method') === 'rocket' ? 'selected' : '' }}>Rocket</option>
                    <option value="bank"   {{ old('method') === 'bank' ? 'selected' : '' }}>Bank</option>
                    <option value="cheque" {{ old('method') === 'cheque' ? 'selected' : '' }}>Cheque</option>
                    <option value="other"  {{ old('method') === 'other' ? 'selected' : '' }}>Other</option>
                </select>
                @error('method')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Amount + Ref --}}
        <div class="row mb-3">
            <div class="col-md-3">
                <label class="form-label">Amount</label>
                <input type="number"
                       step="0.01"
                       name="amount"
                       class="form-control @error('amount') is-invalid @enderror"
                       value="{{ old('amount') }}">
                @error('amount')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="col-md-3">
                <label class="form-label">Ref No</label>
                <input type="text"
                       name="ref_no"
                       class="form-control @error('ref_no') is-invalid @enderror"
                       value="{{ old('ref_no') }}">
                @error('ref_no')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        {{-- Note --}}
        <div class="mb-3">
            <label class="form-label">Note</label>
            <textarea name="note"
                      rows="3"
                      class="form-control @error('note') is-invalid @enderror">{{ old('note') }}</textarea>
            @error('note')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
    </div>

    <div class="card-footer text-end">
        <button type="submit" class="btn btn-success">Save</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const typeSelect     = document.getElementById('typeSelect');
    const supplierSelect = document.getElementById('supplierSelect');
    const customerSelect = document.getElementById('customerSelect');
    const partyHidden    = document.getElementById('party_id');

    function setPartyHiddenFromVisibleSelect() {
        const type = typeSelect.value;
        if (type === 'supplier') {
            partyHidden.value = supplierSelect.value || '';
        } else {
            partyHidden.value = customerSelect.value || '';
        }
    }

    function togglePartySelect() {
        const type = typeSelect.value;

        if (type === 'supplier') {
            supplierSelect.style.display = '';
            customerSelect.style.display = 'none';

            // customer select clear (optional)
            customerSelect.value = '';
        } else {
            customerSelect.style.display = '';
            supplierSelect.style.display = 'none';

            // supplier select clear (optional)
            supplierSelect.value = '';
        }

        setPartyHiddenFromVisibleSelect();
    }

    supplierSelect.addEventListener('change', setPartyHiddenFromVisibleSelect);
    customerSelect.addEventListener('change', setPartyHiddenFromVisibleSelect);
    typeSelect.addEventListener('change', togglePartySelect);

    // initial load
    togglePartySelect();

    // if old party_id exists, keep selected state in correct select
    if (partyHidden.value) {
        if (typeSelect.value === 'supplier') {
            supplierSelect.value = partyHidden.value;
        } else {
            customerSelect.value = partyHidden.value;
        }
    }
    setPartyHiddenFromVisibleSelect();
});
</script>
@endpush