@php
    /** @var \App\Models\ProductInstallment|null $installment */
    $installment = $installment ?? null;
    $isEdit      = (bool) $installment;
    $selectedPop = old('pop_id', $installment->pop_id ?? '');
@endphp

<form method="POST"
      action="{{ $isEdit ? route('product-installment.update', $installment->id) : route('product-installment.store') }}"
      id="installmentForm">
    @csrf
    @if ($isEdit)
        @method('PUT')
    @endif

    <div class="card-body">

        @if ($errors->any())
            <div class="alert alert-danger">
                <h6 class="mb-2"><i class="fas fa-exclamation-triangle mr-1"></i>Please fix the following:</h6>
                <ul class="mb-0 pl-3">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>Manager <span class="text-danger">*</span></label>
                    <select name="manager_id" id="managerSelect" class="form-control select2" required>
                        <option value="">-- Select Manager --</option>
                        @foreach ($managers as $manager)
                            <option value="{{ $manager->id }}"
                                {{ (string) old('manager_id', $installment->manager_id ?? '') === (string) $manager->id ? 'selected' : '' }}>
                                {{ $manager->name_with_type }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label>POP <span class="text-danger">*</span></label>
                    <select name="pop_id" id="popSelect" class="form-control select2" data-selected="{{ $selectedPop }}" required disabled>
                        <option value="">-- Select Manager First --</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>Products <span class="text-danger">*</span></label>
            <div class="table-responsive">
                <table class="table table-sm table-bordered mb-2" id="itemsTable">
                    <thead class="thead-light">
                        <tr>
                            <th style="width:44%">Product</th>
                            <th style="width:18%" class="text-right">Purchase Price (৳)</th>
                            <th style="width:12%" class="text-right">Qty</th>
                            <th style="width:18%" class="text-right">Line Total (৳)</th>
                            <th style="width:8%"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                    <tfoot>
                        <tr>
                            <th colspan="3" class="text-right">Subtotal</th>
                            <th class="text-right" id="subtotal">0.00</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary" id="addItemRowBtn">
                <i class="fa fa-plus"></i> Add Product
            </button>
            <small class="text-muted ml-2">
                Purchase price is filled in from the selected product and can be edited. Picking one that is already listed adds to its quantity.
            </small>
        </div>

        {{-- Requisition ID first, then a narrower Product Details beside it. --}}
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label>Requisition ID <span class="text-danger">*</span></label>
                    <input type="text" name="requisition_id" class="form-control" maxlength="100" autocomplete="off" required
                        placeholder="Store requisition ID"
                        value="{{ old('requisition_id', $installment->requisition_id ?? '') }}">
                </div>
            </div>
            <div class="col-md-8">
                <div class="form-group">
                    <label>Product Details</label>
                    <textarea name="product_details" class="form-control" rows="2" maxlength="1000"
                              placeholder="Optional description...">{{ old('product_details', $installment->product_details ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label>Interest (৳)</label>
                    <input type="number" name="interest" id="interest" class="form-control"
                           min="0" step="0.01" placeholder="0.00"
                           value="{{ old('interest', $installment->interest ?? 0) }}">
                    <small class="text-muted">Added on top of the subtotal</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Total Amount (৳) <span class="text-danger">*</span></label>
                    <input type="number" id="totalAmount" class="form-control bg-light font-weight-bold"
                           step="0.01" placeholder="0.00" readonly>
                    <small class="text-muted" id="totalBreakdown">Subtotal + Interest</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Speed Money (৳)</label>
                    <input type="number" name="speed_money" id="speedMoney" class="form-control"
                           min="0" step="0.01" placeholder="0.00"
                           value="{{ old('speed_money', $installment->speed_money ?? 0) }}">
                    <small class="text-muted">Optional upfront payment</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Installment Count <span class="text-danger">*</span></label>
                    <input type="number" name="installment_count" id="installmentCount" class="form-control"
                           min="1" step="1" placeholder="e.g. 12" required
                           value="{{ old('installment_count', $installment->installment_count ?? '') }}">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label>Per Installment (৳)</label>
                    <input type="number" id="oneInstallmentAmount" class="form-control bg-light"
                           step="0.01" placeholder="Auto-calculated" readonly>
                    <small class="text-muted">(Total − Speed Money) ÷ Count</small>
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Installment Start Month <span class="text-danger">*</span></label>
                    {{-- A month picker, not <input type="month">: that input is not supported in
                         every browser and falls back to a full date box showing a day, which this
                         field never has. The box reads "September 2026"; the hidden field carries
                         the Y-m the server validates, so nothing changes behind the form. --}}
                    @php
                        $startMonthValue = old('start_month', optional($installment->start_month ?? null)->format('Y-m') ?: date('Y-m'));
                        $startMonthLabel = rescue(
                            fn () => \Carbon\Carbon::createFromFormat('!Y-m', $startMonthValue)->format('F Y'),
                            '',
                            false
                        );
                    @endphp
                    <div class="input-group date" id="startMonthPicker" data-target-input="nearest">
                        <input type="text" id="startMonthDisplay" required autocomplete="off"
                               class="form-control datetimepicker-input" placeholder="Select month"
                               data-toggle="datetimepicker" data-target="#startMonthPicker"
                               value="{{ $startMonthLabel }}">
                        <div class="input-group-append" data-target="#startMonthPicker" data-toggle="datetimepicker">
                            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>
                    <input type="hidden" name="start_month" id="startMonth" value="{{ $startMonthValue }}">
                    <small class="text-muted">Schedule starts from this month</small>
                </div>
            </div>
        </div>
    </div>

    <div class="card-footer text-right">
        <a href="{{ route('product-installment.index') }}" class="btn btn-secondary mr-1">Cancel</a>
        <button type="submit" class="btn btn-primary" id="submitBtn">
            <i class="fas fa-save mr-1"></i> {{ $isEdit ? 'Save Changes' : 'Add Product Installment' }}
        </button>
    </div>
</form>