@extends('layouts.app')
@section('title', 'Create 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">Create Feedback & Remarks</div>
        <div class="d-flex align-items-center">
            <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>
            @can('CSM Event Feedbacks create')
                <button type="submit" form="eventFeedbackCreateForm" 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>
            <i 
                class="fa-regular fa-trash-can fixed-nav-btn fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Delete"></i>
            
            <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.store') }}" method="POST" id="eventFeedbackCreateForm">
                @csrf

                <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' : '' }}>
                                    {{ $event->event_name }}
                                </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', \Carbon\Carbon::now()->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>
        </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>
        // 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; }
                return $('<span>').text(event.text).addClass('text-dark');
            }

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