@extends('layouts.app')
@section('title', 'Edit Feedback & Remarks')

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single {
            height: 38px;
            padding: 5px 10px;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
    </style>
@endpush

@section('content')
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Edit Feedback & Remarks</div>
        <div class="d-flex align-items-center">
            {{-- @can('CSM Event Feedbacks create')
                <a href="{{ route('csm.event-feedbacks.create') }}" data-toggle="tooltip" title="Add"> --}}
                    <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"  data-toggle="tooltip" title="Add"></i>
                {{-- </a>
            @endcan --}}
            @can('CSM Event Feedbacks update')
                <button type="submit" form="eventFeedbackEditForm" class="border-0 bg-transparent p-0">
                    <i class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                       data-toggle="tooltip" title="Save"></i>
                </button>
            @endcan
            <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Edit"></i>
            {{-- @can('CSM Event Feedbacks delete')
                <button type="button" class="border-0 bg-transparent p-0"
                        onclick="confirmEventFeedbackDelete({{ $feedback->id }})"> --}}
                    <i class="fa-regular fa-trash-can fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                       data-toggle="tooltip" title="Delete"></i>
                {{-- </button>
            @endcan --}}
            <a href="{{ route('csm.event-feedbacks.index') }}" data-toggle="tooltip" title="Close">
                <i class="fa-solid fa-xmark fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center ms-1"></i>
            </a>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('csm.event-feedbacks.update', $feedback->id) }}" method="POST" id="eventFeedbackEditForm">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="event_id" class="form-label">Event *</label>
                        <select name="event_id" id="event_id" class="form-control select2" required>
                            <option value="">Select Event</option>
                            @foreach ($events as $event)
                                <option value="{{ $event->id }}" {{ old('event_id', $feedback->event_id) == $event->id ? 'selected' : '' }} data-event-date="{{ $event->event_date }}">
                                    {{ $event->event_name }} ({{ \Carbon\Carbon::parse($event->event_date)->format('M d, Y') }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="date" class="form-label">Date *</label>
                        <input type="date" name="date" id="date" class="form-control"
                               value="{{ old('date', optional($feedback->date)->format('Y-m-d')) }}" required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="positive_feedback" class="form-label">Positive Feedback</label>
                        <textarea name="positive_feedback" id="positive_feedback" class="form-control" rows="3">{{ old('positive_feedback', $feedback->positive_feedback) }}</textarea>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="improvement_feedback" class="form-label">Improvement Feedback</label>
                        <textarea name="improvement_feedback" id="improvement_feedback" class="form-control" rows="3">{{ old('improvement_feedback', $feedback->improvement_feedback) }}</textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="remarks_payment_collection_empties" class="form-label">Remarks: Payment collection, Empties</label>
                        <textarea name="remarks_payment_collection_empties" id="remarks_payment_collection_empties" class="form-control" rows="3">{{ old('remarks_payment_collection_empties', $feedback->remarks_payment_collection_empties) }}</textarea>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="remarks_hotel_servicing" class="form-label">Remarks: Hotel servicing</label>
                        <textarea name="remarks_hotel_servicing" id="remarks_hotel_servicing" class="form-control" rows="3">{{ old('remarks_hotel_servicing', $feedback->remarks_hotel_servicing) }}</textarea>
                    </div>
                </div>

            </form>

            @can('CSM Event Feedbacks delete')
                <form id="deleteEventFeedbackForm{{ $feedback->id }}" action="{{ route('csm.event-feedbacks.destroy', $feedback->id) }}" method="POST" style="display: none;">
                    @csrf
                    @method('DELETE')
                </form>
            @endcan
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        function confirmEventFeedbackDelete(id) {
            if (typeof Swal === 'undefined') {
                var formFallback = document.getElementById('deleteEventFeedbackForm' + id);
                if (formFallback) {
                    if (confirm('Are you sure you want to delete this entry?')) {
                        formFallback.submit();
                    }
                }
                return;
            }

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then(function (result) {
                if (result.isConfirmed) {
                    var form = document.getElementById('deleteEventFeedbackForm' + id);
                    if (form) {
                        form.submit();
                    }
                }
            });
        }
        // Initialize Select2 for event dropdown
        $(document).ready(function() {
            $('#event_id').select2({
                placeholder: 'Search for an event...',
                allowClear: true,
                width: '100%',
                templateResult: formatEvent,
                templateSelection: formatEventSelection
            });

            function formatEvent(event) {
                if (!event.id) { return event.text; }
                var date = $(event.element).data('event-date');
                var formattedDate = date ? ' (' + new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + ')' : '';
                return $('<span>').text($(event.element).text().split(' (')[0] + formattedDate).addClass('text-dark');
            }

            function formatEventSelection(event) {
                if (!event.id) { return event.text; }
                return $('<span>').text($(event.element).text().split(' (')[0]).addClass('text-dark');
            }
        });
    </script>
@endpush