@extends('layouts.admin.master')

@section('title')
    {{ !empty($additionalEventReservation) ? 'Edit Additional Reservation' : 'Add Additional Reservation' }}
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <!-- Page Header -->
                <div class="card dashboard-custom-card mb-3">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between align-items-center">
                            <h4 class="mb-0">
                                {{ !empty($additionalEventReservation) ? 'Edit Additional Reservation' : 'Add Additional Reservation' }}
                            </h4>
                            <div>
                                <a href="{{ route('reservation.details', $eventReservation->id) }}" class="btn btn-sm btn-info">
                                    <i class="fas fa-eye"></i> View Details
                                </a>
                                <a href="{{ route('reservation.additional', $eventReservation->id) }}" class="btn btn-sm btn-secondary">
                                    <i class="fas fa-arrow-left"></i> Back to List
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <form action="{{ !empty($additionalEventReservation)? (route('reservation.additional.update', [$eventReservation->id, $additionalEventReservation->id])) : route('reservation.additional.store', $eventReservation->id) }}" method="POST" id="editReservationForm">
                    @csrf
                    @method(!empty($additionalEventReservation)?'PUT':'POST')

                    <!-- Editable Participant Details -->
                    @php
                        $invoice = is_string($eventReservation->invoice) ? json_decode($eventReservation->invoice, true) : $eventReservation->invoice;
                        $eventDate = $eventReservation->eventDate;
                    @endphp

                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0 w-100">Edit Participant Details</h5>
                            <p class="text-muted small mb-0">Update the participant counts below. Fees will be recalculated automatically.</p>
                        </div>
                        <div class="card-body">

                            <div class="table-responsive">
                                <table class="table table-sm table-bordered" style="font-size: 0.875rem;">
                                    <thead>
                                        <tr>
                                            <th width="40%">Participant Type</th>
                                            <th class="text-end" style="width: 25%">Fee (BDT)</th>
                                            <th class="text-center" style="width: 10%">No. of Participants</th>
                                            <th class="text-end" style="width: 25%">Subtotal</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    <tr>
                                        <td>Spouse</td>
                                        <td class="text-end fee-rate" data-fee-type="spouse">{{ number_format($eventDate->spouse_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="spouse" class="form-control form-control-sm participant-count"
                                                   data-type="spouse" data-rate="{{ $eventDate->spouse_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation?->spouse ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="spouse">
                                            {{ number_format(
                                                ($eventDate->spouse_fee ?? 0) * ($additionalEventReservation?->spouse ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Children (Below 5)</td>
                                        <td class="text-end fee-rate" data-fee-type="children_below_5">{{ number_format($eventDate->children_below_5_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="children_below_5" class="form-control form-control-sm participant-count"
                                                   data-type="children_below_5" data-rate="{{ $eventDate->children_below_5_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation->children_below_5 ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="children_below_5">
                                            {{ number_format(
                                                ($eventDate->children_below_5_fee ?? 0) * ($additionalEventReservation->children_below_5 ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Children (5–12)</td>
                                        <td class="text-end fee-rate" data-fee-type="children_5_to_12">{{ number_format($eventDate->children_5_to_12_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="children_5_to_12" class="form-control form-control-sm participant-count"
                                                   data-type="children_5_to_12" data-rate="{{ $eventDate->children_5_to_12_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation->children_5_to_12 ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="children_5_to_12">
                                            {{ number_format(
                                                ($eventDate->children_5_to_12_fee ?? 0) * ($additionalEventReservation->children_5_to_12 ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Children (Above 12)</td>
                                        <td class="text-end fee-rate" data-fee-type="children_above_12">{{ number_format($eventDate->children_above_12_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="children_above_12" class="form-control form-control-sm participant-count"
                                                   data-type="children_above_12" data-rate="{{ $eventDate->children_above_12_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation->children_above_12 ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="children_above_12">
                                            {{ number_format(
                                                ($eventDate->children_above_12_fee ?? 0) * ($additionalEventReservation->children_above_12 ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Driver</td>
                                        <td class="text-end fee-rate" data-fee-type="driver">{{ number_format($eventDate->driver_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="driver" class="form-control form-control-sm participant-count"
                                                   data-type="driver" data-rate="{{ $eventDate->driver_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation->driver ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="driver">
                                            {{ number_format(
                                                ( $eventDate->driver_fee ?? 0) * ($additionalEventReservation->driver ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Maid</td>
                                        <td class="text-end fee-rate" data-fee-type="maid">{{ number_format($eventDate->maid_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="maid" class="form-control form-control-sm participant-count"
                                                   data-type="maid" data-rate="{{ $eventDate->maid_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation->maid ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="maid">
                                            {{ number_format(
                                                ( $eventDate->maid_fee ?? 0) * ($additionalEventReservation->maid ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Other Guests</td>
                                        <td class="text-end fee-rate" data-fee-type="other_guest">{{ number_format($eventDate->other_guest_fee ?? 0, 2) }}</td>
                                        <td class="text-center">
                                            <input type="number" name="other_guest" class="form-control form-control-sm participant-count"
                                                   data-type="other_guest" data-rate="{{ $eventDate->other_guest_fee ?? 0 }}"
                                                   value="{{ $additionalEventReservation->other_guest ?? 0 }}" min="0">
                                        </td>
                                        <td class="text-end subtotal-display" data-fee-type="other_guest">
                                            {{ number_format(
                                                ($eventDate->other_guest_fee ?? 0) * ($additionalEventReservation->other_guest ?? 0)
                                            , 2) }}
                                        </td>
                                    </tr>
                                    </tbody>
                                        <tfoot>
                                        @php
                                            $totalAmount = 0;

                                            $totalAmount += ($eventDate->spouse_fee ?? 0) * ($additionalEventReservation->spouse ?? 0);
                                            $totalAmount += ($eventDate->children_below_5_fee ?? 0) * ($additionalEventReservation->children_below_5 ?? 0);
                                            $totalAmount += ($eventDate->children_5_to_12_fee ?? 0) * ($additionalEventReservation->children_5_to_12 ?? 0);
                                            $totalAmount += ($eventDate->children_above_12_fee ?? 0) * ($additionalEventReservation->children_above_12 ?? 0);
                                            $totalAmount += ($eventDate->driver_fee ?? 0) * ($additionalEventReservation->driver ?? 0);
                                            $totalAmount += ($eventDate->maid_fee ?? 0) * ($additionalEventReservation->maid ?? 0);
                                            $totalAmount += ($eventDate->other_guest_fee ?? 0) * ($additionalEventReservation->other_guest ?? 0);
                                        @endphp
                                        <tr>
                                            <th colspan="3" class="text-end">Total Amount:</th>
                                            <th class="text-end" id="total-amount">
                                                {{ number_format(($totalAmount), 2) }}</th>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>

                            <!-- Special Requirements -->
                            <div class="mb-3">
                                <label for="special_requirements" class="form-label">Special Requirements</label>
                                <textarea name="special_requirements" id="special_requirements"
                                          class="form-control" rows="3">{{ $additionalEventReservation->special_requirements??'' }}</textarea>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-flex justify-content-end gap-2">
                                <a href="{{ route('reservation.details', $eventReservation->id) }}" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> Cancel
                                </a>
                                <button type="submit" class="btn btn-primary ml-2">
                                    <i class="fas fa-save"></i> Update Reservation
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function() {

        // Function to format number with 2 decimal places
        function formatCurrency(amount) {
            return parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }

        // Function to update subtotal for a specific participant type
        function updateSubtotal(input) {
            const type = input.data('type');
            const rate = parseFloat(input.data('rate')) || 0;
            const count = parseInt(input.val()) || 0;
            const subtotal = count * rate;

            // Update the subtotal display
            const subtotalCell = $('.subtotal-display[data-fee-type="' + type + '"]');
            subtotalCell.text(formatCurrency(subtotal));

            // Update total amount
            updateTotalAmount();
        }

        // Function to calculate and update total amount
        function updateTotalAmount() {
            let total = 0;
            $('.subtotal-display').each(function() {
                const subtotalText = $(this).text().replace(/,/g, '');
                const subtotalValue = parseFloat(subtotalText) || 0;
                total += subtotalValue;
            });

            $('#total-amount').text(formatCurrency(total));
        }

        // Get all editable participant inputs
        const editableInputs = $('.participant-count:not([readonly])');

        // Log each input details
        editableInputs.each(function(index) {
            const $input = $(this);
        });

        // Listen for changes on participant count inputs (exclude readonly inputs like Alumni)
        editableInputs.on('input change keyup', function() {
            const $this = $(this);
            // Prevent negative values
            if ($this.val() < 0) {
                $this.val(0);
            }

            // Update the subtotal for this participant type
            updateSubtotal($this);
        });

        // Form submission
        $('#editReservationForm').on('submit', function(e) {
            e.preventDefault();

            const submitBtn = $(this).find('button[type="submit"]');
            const originalText = submitBtn.html();
            submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Updating...');

            $.ajax({
                url: $(this).attr('action'),
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.location.href = response.redirect;
                        }, 1500);
                    } else {
                        toastr.error(response.message || 'An error occurred');
                        submitBtn.prop('disabled', false).html(originalText);
                    }
                },
                error: function(xhr) {

                    console.log('mmmmm', xhr.responseJSON);
                    let errorMsg = 'An error occurred while updating the reservation.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                    submitBtn.prop('disabled', false).html(originalText);
                }
            });
        });
    });
</script>
@endpush