@extends('layout.app')

@section('content')
    <form action="{{ route('core-rent.store') }}" method="POST">
        @csrf
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Add Core Rent</h5>
            </div>
            <div class="card-body">
                <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 }}"
                                    {{ old('reseller_id') == $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>
                        <select name="pop_id" id="pop_id" class="form-control select2" required>
                            <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>Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" value="{{ old('title') }}"
                            placeholder="e.g. Fiber cable duct rent - Mirpur" autocomplete="off">
                        @error('title')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <label>Location</label>
                        <input type="text" name="location" class="form-control" value="{{ old('location') }}"
                            placeholder="Physical location / address" autocomplete="off">
                        @error('location')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-12">
                        <div class="alert alert-info py-2">
                            <i class="fa fa-info-circle"></i>
                            <strong>Monthly</strong> / <strong>Yearly</strong> rents keep billing automatically — from the
                            Start Date, one more rent amount is added to the due every period, so it has to be paid every
                            month (or year). Set an <strong>End Date</strong> to stop it; leave empty to run indefinitely.
                            A <strong>monthly</strong> rent is charged by days in its first and last month — from the Start
                            Date to that month's end, and from the 1st to the End Date — and in full for every month between.
                        </div>
                    </div>

                    <div class="form-group col-md-4">
                        <label>Rent Amount <span class="text-danger">*</span> <small class="text-muted">(per period)</small></label>
                        <input type="number" name="rent_amount" class="form-control" value="{{ old('rent_amount') }}"
                            placeholder="0.00" step="0.01" min="0">
                        @error('rent_amount')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-4">
                        <label>Payment Type <span class="text-danger">*</span></label>
                        <select name="payment_type" class="form-control select2">
                            <option value="monthly"  {{ old('payment_type', 'monthly') == 'monthly'  ? 'selected' : '' }}>Monthly (recurring)</option>
                            <option value="yearly"   {{ old('payment_type') == 'yearly'   ? 'selected' : '' }}>Yearly (recurring)</option>
                            <option value="one-time" {{ old('payment_type') == 'one-time' ? 'selected' : '' }}>One-Time</option>
                        </select>
                        @error('payment_type')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-2">
                        <label>Start Date <span class="text-danger">*</span></label>
                        <input type="date" name="start_date" class="form-control" value="{{ old('start_date') }}">
                        @error('start_date')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-2">
                        <label>End Date</label>
                        <input type="date" name="end_date" class="form-control" value="{{ old('end_date') }}">
                        @error('end_date')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <label>Owner Name <span class="text-danger">*</span></label>
                        <input type="text" name="landlord_name" class="form-control" value="{{ old('landlord_name') }}"
                            placeholder="Owner name" autocomplete="off">
                        @error('landlord_name')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-6">
                        <label>Owner Contact</label>
                        <input type="text" name="landlord_contact" class="form-control"
                            value="{{ old('landlord_contact') }}" placeholder="Phone / contact number" autocomplete="off">
                        @error('landlord_contact')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group col-md-12">
                        <label>Remarks</label>
                        <textarea name="remarks" class="form-control" rows="3"
                            placeholder="Any additional notes...">{{ old('remarks') }}</textarea>
                        @error('remarks')
                            <div class="alert alert-danger mt-1">{{ $message }}</div>
                        @enderror
                    </div>

                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary float-right">Submit for Approval</button>
                    <a href="{{ route('core-rent.index') }}" class="btn btn-secondary float-right mr-2">Back</a>
                </div>
            </div>
        </div>
    </form>
@endsection

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

    function loadPops(resellerId, selectedPopId) {
        const $pop = $('#pop_id');
        $pop.empty().append('<option value="">— Select POP —</option>');

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

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

    // On validation failure, reload pops for previously selected manager
    $(document).ready(function () {
        const selectedReseller = $('#reseller_id').val();
        if (selectedReseller) {
            loadPops(selectedReseller, oldPopId);
        }
    });
</script>
@endpush