@php
    $edit = !empty($committeeType->id);

    $orderings = [];

    // Get all available focus areas
    $focusAreas = \App\Models\CommitteeFocusArea::active()->orderBy('name')->get();
@endphp
@extends('layouts.admin.master')

@section('title')
    {{ $edit ? 'Edit' : 'Create' }} Committee Types
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        .select2-selection__choice__display{
            color: #484747;
        }
    </style>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card dashboard-custom-card">
                    <div class="card-body">
                        <div class="custom-card-header d-flex justify-content-between">
                            <h4 class="">{{ $edit ? 'Edit' : 'Create' }} Committee Types</h4>
                            <a href="{{ route('admin.committee-types.index') }}" class="create-button">
                                <i class="fas fa-backward"></i> Back
                            </a>
                        </div>

                        <form
                            action="{{ $edit ? route('admin.committee-types.update', $committeeType->id) : route('admin.committee-types.store') }}"
                            method="POST" class="edit-add-form" enctype="multipart/form-data">
                            @csrf
                            @if ($edit)
                                @method('PUT')
                            @endif

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="name">Name <span style="color: red"> * </span></label>
                                    <input type="text" name="name" class="form-control" id="name" placeholder="Enter Name"  value="{{ $edit ? $committeeType->name : old('name') }}">
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="established_year">Established Year</label>
                                    <input type="number" name="established_year" class="form-control" id="established_year"
                                           placeholder="e.g., 1995" min="1900" max="{{ date('Y') + 1 }}"
                                           value="{{ $edit ? $committeeType->established_year : old('established_year') }}">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="schedule_type" class="form-label">Schedule Type</label>
                                    <select id="schedule_type" name="schedule_type" class="form-select form-control">
                                        <option value="">Select Schedule Type</option>
                                        @foreach(config('services.schedule_type') as $key => $label)
                                            <option value="{{ $key }}"
                                                {{ $edit && $committeeType->schedule_type === $key ? 'selected' : (old('schedule_type') == $key ? 'selected' : '') }}>
                                                {{ $label }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="schedule_datetime" class="form-label">Start Date & Time</label>
                                    <input type="datetime-local" id="schedule_datetime" name="schedule_datetime" class="form-control"
                                           value="{{ $edit ? \Carbon\Carbon::parse($committeeType->schedule_datetime)->format('Y-m-d\TH:i') : old('schedule_datetime') }}">
                                </div>
                            </div>


                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="description">Description <span style="color: red"> * </span></label>
                                    <textarea class="form-control" name="description" id="description" rows="3">{{ $edit ? $committeeType->description : old('description') }}</textarea>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="ordering">Ordering</label>
                                    <input type="number" class="form-control" name="ordering" id="ordering" placeholder="e.g., 1" min="0" value="{{ $edit ? $committeeType->ordering : old('ordering') }}">
                                </div>

{{--                                <div class="form-group col-md-6">--}}
{{--                                    <label for="focus_areas">Focus Areas</label>--}}
{{--                                    <select class="form-control select2" name="focus_areas[]" id="focus_areas" multiple>--}}
{{--                                        @foreach ($focusAreas as $focusArea)--}}
{{--                                            <option value="{{ $focusArea->id }}"--}}
{{--                                                {{ $edit && $committeeType->focusAreas->contains($focusArea->id) ? 'selected' : '' }}>--}}
{{--                                                {{ $focusArea->name }}--}}
{{--                                            </option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                    <small class="form-text text-muted">Type and press Enter to add new focus areas</small>--}}
{{--                                </div>--}}

                                <div class="form-group col-md-6">
                                    <label for="field_of_work">Field of work</label>
                                    <select class="form-control select2" name="field_of_work[]" id="field_of_work" multiple>
                                        @php
                                            $fieldOfWorks = $edit ? json_decode($committeeType->field_of_work, true) : old('field_of_work', []);
                                        @endphp

                                        @if(!empty($fieldOfWorks))
                                            @foreach($fieldOfWorks as $work)
                                                <option value="{{ $work }}" selected>{{ $work }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                    <small class="form-text text-muted">Type and press Enter to add new field of work</small>
                                </div>

                            </div>

                            <button class="btn btn-primary" id="submit"><i
                                    class="fa fa-save"></i> {{ $edit ? 'Update' : 'Create' }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('js')
    <x-generic-validation-error-toastr/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        flatpickr("#schedule_datetime", {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
            minDate: "today"
        });

        $(document).ready(function() {
            $('#field_of_work').select2({
                tags: true,
                tokenSeparators: [','],
                placeholder: "Type field of work",
                allowClear: true,
                createTag: function (params) {
                    return {
                        id: params.term,
                        text: params.term,
                        newOption: true
                    }
                }
            });
        });

        const EDIT = !!'{{ $edit }}';
        const editAddForm = $('.edit-add-form');

        // Initialize Select2 for focus areas
        // $(document).ready(function() {
        //     $('#focus_areas').select2({
        //         placeholder: 'Select focus areas',
        //         allowClear: true,
        //         theme: 'classic'
        //     });
        // });

        editAddForm.validate({
            rules: {
                name: {
                    required: true
                },
                description: {
                    required: true
                },
                ordering: {
                    number: true
                }
            },

            submitHandler: function (htmlForm) {
                $('.overlay').show();
                const form = $(htmlForm);
                const formData = new FormData(htmlForm);
                const url = form.attr("action");

                if (EDIT) {
                    formData.append('_method', 'PUT');
                }

                $.ajax({
                    url: url,
                    data: formData,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        $('.overlay').hide();
                        let alertType = response.alertType;
                        let alertMessage = response.message;
                        let alerter = toastr[alertType];

                        if (alerter) {
                            alerter(alertMessage);
                            setTimeout(function() {
                                if (response.redirectTo) {
                                    window.location.href = response.redirectTo;
                                }
                            }, 1500);
                        } else {
                            toastr.error("toastr alert-type " + alertType + " is unknown");
                        }
                    },
                    error: function(xhr) {
                        $('.overlay').hide();
                        var response = xhr.responseJSON;
                        if (response && response.errors) {
                            Object.keys(response.errors).forEach(function(field) {
                                const errorMessage = response.errors[field].join(", ");
                                toastr.error(errorMessage, "Validation Error");
                            });
                        }
                    }
                });
                return false;
            }
        });
    </script>
@endpush