@extends('admin.layouts.master')
@section('title', 'Edit Booking')

@section('content')
<div class="row fv-plugins-icon-container">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between">
                <h5 class="card-title mb-0">Edit Booking</h5>
                <a class="btn btn-sm btn-primary waves-effect waves-light" href="{{ route('admin.booking.list') }}">
                    <i class="me-1 fa-solid fa-chevron-left"></i> Back
                </a>
            </div>

            @if(session('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
            @endif

            @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
            @endif

            <div class="card-body">
                <form method="POST" action="{{ route('admin.booking.update', encrypt($booking->id)) }}" class="fv-plugins-bootstrap5">
                    @csrf

                    <div class="row">
{{-- Customer ID --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Customer <span class="text-danger">*</span></label>
    <select name="customer_id" id="customer_id" class="form-contro select2 @error('customer_id') is-invalid @enderror">
        <option value="">Select Customer</option>
        @foreach($customers as $customer)
            <option value="{{ $customer->id }}" {{ old('customer_id', $booking->customer_id) == $customer->id ? 'selected' : '' }}>
                {{ $customer->name }} ({{ $customer->email }})
            </option>
        @endforeach
    </select>
    @error('customer_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

{{-- Booking Name --}}
<div class="mb-3 col-md-6">
    <label class="form-label">
        Customer Name
        <span class="text-danger" id="name-required-mark" style="display: none;">*</span>
    </label>
    <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror"
        value="{{ old('name', $booking->name) }}">
    <small class="text-muted" id="name-hint" style="display: none;">Required only if customer not logged in .</small>
    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

{{-- Email --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Email <span class="text-danger">*</span></label>
    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
           value="{{ old('email', $booking->email) }}" required>
    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

           {{-- Package Select --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Package <span class="text-danger">*</span></label>
    <select name="package_id" id="package_id"
        class="form-control select2  @error('package_id') is-invalid @enderror"
        required onchange="updateTotalAmount()">
        <option value="">-- Select Package --</option>
        @foreach($packages as $package)
         <option value="{{ $package->id }}"
        data-price="{{ $package->discount_price ?? $package->original_price }}"
        {{ old('package_id', $booking->package_id ?? '') == $package->id ? 'selected' : '' }}>
    {{ $package->title }}
</option>

        @endforeach
    </select>
    @error('package_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>


                        {{-- Booking Date --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Booking Date <span class="text-danger">*</span></label>
                            <input type="date" name="booking_date" class="form-control @error('booking_date') is-invalid @enderror"
                                value="{{ old('booking_date', $booking->booking_date->format('Y-m-d')) }}" required>
                            @error('booking_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>

                        {{-- Status --}}
                        <div class="mb-3 col-md-6">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-control select2  @error('status')  is-invalid @enderror" required>
                                <option value="">Select Status</option>
                                <option value="pending" {{ old('status', $booking->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="confirmed" {{ old('status', $booking->status) == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                                <option value="cancelled" {{ old('status', $booking->status) == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                                  <option value="purchased" {{ old('status', $booking->status) == 'purchased' ? 'selected' : '' }}>Purchased</option>
                            </select>
                            @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        {{-- Number of People --}}
<div class="mb-3 col-md-6">
    <label class="form-label">Number of People <span class="text-danger">*</span></label>
    <input type="number" name="people" id="people" min="1" value="{{ old('people', $booking->people ?? 1) }}"
        class="form-control @error('people') is-invalid @enderror" required>
    @error('people')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>

@if(!empty($booking->redeemed_points))
    {{-- Final Amount (after redeem) --}}
    <div class="mb-3 col-md-6">
        <label class="form-label">Final Amount (After Redeem)</label>
        <input type="number" step="0.01" name="amount" id="amount"
            class="form-control @error('amount') is-invalid @enderror"
            value="{{ old('amount', $booking->amount ?? '') }}" readonly>
        @error('amount')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>

    {{-- Redeemed Points --}}
    <div class="mb-3 col-md-12">
        <label class="form-label">Redeemed Points</label>
        <input type="number" class="form-control" value="{{ $booking->redeemed_points }}" readonly>
    </div>
@endif
  {{-- Referred By --}}
    <div class="mb-3 col-md-12">
        <label class="form-label">Referred By</label>
        <input type="text" class="form-control"
               value="{{ $booking->customer?->referrer?->name ?? $booking->customer?->referrer?->email ?? 'Not referred' }}"
               readonly>
    </div>
{{-- Original Total Amount (before redeem) — goes into booked_amount --}}
<div class="mb-3 col-md-12">
    <label class="form-label">Total Amount</label>
    <input type="number" step="0.01" name="booked_amount" id="booked_amount"
        class="form-control" value="{{ old('booked_amount', $booking->booked_amount ?? '') }}" >
</div>


{{-- Message --}}
<div class="mb-3 col-md-12">
    <label class="form-label">Message</label>
    <textarea name="message" rows="3" class="form-control @error('message') is-invalid @enderror">{{ old('message', $booking->message) }}</textarea>
    @error('message')<div class="invalid-feedback">{{ $message }}</div>@enderror
</div>


                    </div>

                    <div class="mt-3">
                        <button type="submit" class="btn btn-sm btn-primary me-2 waves-effect waves-light">Update</button>
                        <button type="reset" class="btn btn-sm btn-secondary waves-effect">Reset</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
<script>



    function toggleNameField() {
        const customerSelect = document.getElementById('customer_id');
        const nameInput = document.getElementById('name');
        const requiredMark = document.getElementById('name-required-mark');
        const nameHint = document.getElementById('name-hint');

        if (!customerSelect.value) {
            nameInput.setAttribute('required', 'required');
            requiredMark.style.display = 'inline';
            nameHint.style.display = 'block';
        } else {
            nameInput.removeAttribute('required');
            requiredMark.style.display = 'none';
            nameHint.style.display = 'none';
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        toggleNameField(); // On load
        document.getElementById('customer_id').addEventListener('change', toggleNameField);
    });
</script>
<script>
/*function updateTotalAmount() {
    const packageSelect = document.getElementById('package_id');
    const selectedOption = packageSelect.options[packageSelect.selectedIndex];
    const pricePerPerson = parseFloat(selectedOption.getAttribute('data-price')) || 0;

    const peopleInput = document.getElementById('people');
    const peopleCount = parseInt(peopleInput.value) || 1;

    const totalAmount = pricePerPerson * peopleCount;

    // ✅ Update booked_amount (before redeem)
    //document.getElementById('booked_amount').value = totalAmount.toFixed(2);

    // ❌ Do NOT update final amount
}


document.addEventListener('DOMContentLoaded', function () {
    updateTotalAmount();

    document.getElementById('package_id').addEventListener('change', updateTotalAmount);
    document.getElementById('people').addEventListener('input', updateTotalAmount);
});*/
function updateTotalAmount() {
    const packageSelect = document.getElementById('package_id');
    const selectedOption = packageSelect.options[packageSelect.selectedIndex];

    if (!selectedOption || !selectedOption.value) {
        return; // No package selected
    }

    const pricePerPerson = parseFloat(selectedOption.getAttribute('data-price')) || 0;
    const peopleInput = document.getElementById('people');
    const peopleCount = parseInt(peopleInput.value) || 1;

    if (pricePerPerson > 0 && peopleCount > 0) {
        const totalAmount = pricePerPerson * peopleCount;
        //document.getElementById('booked_amount').value = totalAmount.toFixed(2);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    const packageSelect = document.getElementById('package_id');
    if (packageSelect.value) {
        updateTotalAmount(); // Only if a package is already selected
    }

    document.getElementById('package_id').addEventListener('change', updateTotalAmount);
    document.getElementById('people').addEventListener('input', updateTotalAmount);
});
</script>

@push('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function () {
        $('.select2').select2({
            width: '100%',
              allowClear: true
        });
    });
</script>
@endpush

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />