{{-- Real IP Bill fields, shared by the create and edit pages. Expects $resellers and,
     on edit, $bill; old() input wins so a failed save keeps what was typed. --}}
@php
    $bill = $bill ?? null;
    $selectedReseller = old('reseller_id', optional($bill)->reseller_id);
@endphp

<div class="row">
    <div class="form-group col-md-6">
        <label>Manager <span class="text-danger">*</span></label>
        <select name="reseller_id" id="reseller_id" class="form-control select2" required>
            <option value="">— Select Manager —</option>
            @foreach ($resellers as $reseller)
                <option value="{{ $reseller->id }}" {{ $selectedReseller == $reseller->id ? 'selected' : '' }}>
                    {{ $reseller->name_with_type }}
                </option>
            @endforeach
        </select>
        @error('reseller_id')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>POP <span class="text-danger">*</span></label>
        {{-- Filled from the chosen manager by the page script. --}}
        <select name="pop_id" id="pop_id" class="form-control select2" required
            data-selected="{{ old('pop_id', optional($bill)->pop_id) }}">
            <option value="">— Select Manager first —</option>
        </select>
        @error('pop_id')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>IP Address <span class="text-danger">*</span></label>
        <input type="text" name="ip_address" class="form-control" maxlength="45" required autocomplete="off"
            placeholder="e.g. 192.168.1.1" value="{{ old('ip_address', optional($bill)->ip_address) }}">
        @error('ip_address')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>Amount per Month (৳) <span class="text-danger">*</span></label>
        <input type="number" name="amount" class="form-control" min="0.01" step="0.01" required
            placeholder="Enter bill amount" value="{{ old('amount', optional($bill)->amount) }}">
        <small class="form-text text-muted">
            Charged in full for every whole month. The first and last month are charged by days.
        </small>
        @error('amount')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>Start Date <span class="text-danger">*</span></label>
        <input type="date" name="billing_month" class="form-control" required
            value="{{ old('billing_month', $bill ? $bill->billing_month->format('Y-m-d') : date('Y-m-d')) }}">
        <small class="form-text text-muted">
            The first month is charged from this date to the month's last day.
        </small>
        @error('billing_month')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-6">
        <label>End Date</label>
        <input type="date" name="end_month" class="form-control"
            value="{{ old('end_month', optional(optional($bill)->end_month)->format('Y-m-d')) }}">
        <small class="form-text text-muted">
            Last day to bill — the last month is charged from its 1st day up to this date.
            @if ($bill)
                Set this to stop the monthly charge; amounts already billed stay due.
            @endif
            Leave empty to keep billing every month indefinitely.
        </small>
        @error('end_month')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group col-md-12">
        <label>Description</label>
        <textarea name="description" class="form-control" rows="3"
            placeholder="Optional note...">{{ old('description', optional($bill)->description) }}</textarea>
        @error('description')
            <div class="alert alert-danger mt-1">{{ $message }}</div>
        @enderror
    </div>
</div>

@push('js')
<script>
    $(function () {
        const resellerPopUrl = "{{ route('reseller-pop') }}";
        const $pop = $('#pop_id');

        function loadPops(resellerId, selectedPopId) {
            $pop.empty();

            if (!resellerId) {
                $pop.append('<option value="">— Select Manager first —</option>').trigger('change');
                return;
            }

            $pop.append('<option value="">— Select POP —</option>');
            $.get(resellerPopUrl, { reseller: resellerId }, function (data) {
                $.each(data.popes, function (i, pop) {
                    const selected = (selectedPopId && pop.id == selectedPopId) ? 'selected' : '';
                    $pop.append('<option value="' + pop.id + '" ' + selected + '>' + pop.popname + '</option>');
                });
                $pop.trigger('change');
            });
        }

        $('#reseller_id').on('change', function () {
            loadPops($(this).val(), null);
        });

        // Edit, or a save that bounced back: load the manager's POPs and keep the chosen one.
        if ($('#reseller_id').val()) {
            loadPops($('#reseller_id').val(), $pop.data('selected'));
        }

        // One submit only — a double click must not save the bill twice.
        $pop.closest('form').on('submit', function () {
            $(this).find('button[type="submit"]').prop('disabled', true)
                .html('<span class="spinner-border spinner-border-sm"></span> Saving...');
        });
    });
</script>
@endpush