@extends('layout.base')

@section('action')
    {{-- <button class="btn btn-light-danger btn-sm rounded" id="btnActionReject">
    <i class="fas fa-trash"></i> Reject
</button> --}}
    @if (empty($volunteer->status))
        <button class="btn btn-light-primary btn-sm rounded btnShortlist" data-id="{{ $volunteer->id }}">
            <i class="fas fa-check"></i> Shortlist
        </button>
    @elseif ($volunteer->status == 'shortlist')
        <button class="btn btn-light-primary btn-sm rounded btnApprove" data-id="{{ $volunteer->id }}"
            data-nationality="{{ $volunteer->nationality }}">
            <i class="fas fa-check"></i> Approve
        </button>
    @endif
@endsection

@section('content')
    <style>
        /* Style tampilan dropdown yang aktif */
        .select2-container--default .select2-selection--single {
            background-color: #ffffff !important;
            border: 1px solid #ced4da !important;
            color: #212529 !important;
            height: 38px !important;
            border-radius: 4px !important;
        }

        /* Style teks yang ditampilkan */
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #212529 !important;
            background-color: transparent !important;
            line-height: 36px !important;
        }

        /* Panah dropdown */
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px !important;
        }

        /* Style dropdown saat terbuka */
        .select2-container--open .select2-dropdown {
            background-color: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #ced4da !important;
            z-index: 9999 !important;
        }
    </style>
    {{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" /> --}}
    <div class="row">
        <div class="col-9">
            <div class="card card-flush">
                <div class="card-body">
                    <h3 class="mb-3">Personal Information</h3>
                    <div class="row g-5">
                        <div class="col-4">
                            <label for="">Title</label>
                            <input type="text" class="form-control" value="{{ $volunteer->title }}">
                        </div>

                        <div class="col-4">
                            <label for="">Given Name</label>
                            <input type="text" class="form-control" value="{{ $volunteer->given_name }}">
                        </div>

                        <div class="col-4">
                            <label for="">Family Name</label>
                            <input type="text" class="form-control" value="{{ $volunteer->family_name }}">
                        </div>

                        <div class="col-6">
                            <label for="">Preffered Given Name</label>
                            <input type="text" class="form-control" value="{{ $volunteer->preferred_given_name }}">
                        </div>

                        <div class="col-6">
                            <label for="">Preffered Family Name</label>
                            <input type="text" class="form-control" value="{{ $volunteer->preferred_family_name }}">
                        </div>

                        <div class="col-4">
                            <label for="">Nationality</label>
                            <input type="text" class="form-control" value="{{ $volunteer->nationality }}">
                        </div>

                        <div class="col-4">
                            <label for="">Polo/Jacket Uniform Size</label>
                            <input type="text" class="form-control" value="{{ $volunteer->jacket_size }}">
                        </div>

                        <div class="col-4">
                            <label for="">Pants Uniform Size</label>
                            <input type="text" class="form-control" value="{{ $volunteer->pants_size }}">
                        </div>

                        <div class="col-6">
                            <label for="">Mobile Phone Number</label>
                            <input type="text" class="form-control" value="{{ $volunteer->mobile_phone }}">
                        </div>

                        <div class="col-6">
                            <label for="">Email</label>
                            <input type="text" class="form-control" value="{{ $volunteer->email }}">
                        </div>

                        <div class="col-6">
                            <label for="">Instagram</label>
                            <input type="text" class="form-control" value="{{ $volunteer->instagram }}">
                        </div>

                        <div class="col-6">
                            <label for="">Facebook</label>
                            <input type="text" class="form-control" value="{{ $volunteer->facebook }}">
                        </div>
                    </div>

                    <h3 class="mb-3 mt-5">Skills</h3>
                    <div class="row g-5">
                        <div class="col-3">
                            <h5>Function</h5>
                            <ul>
                                @foreach (json_decode($volunteer->functions) as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="col-3">
                            <h5>Skills</h5>
                            <ul>
                                @foreach (json_decode($volunteer->skills) as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="col-3">
                            <h5>Educations</h5>
                            <ul>
                                @foreach (json_decode($volunteer->educations) as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>

                        <div class="col-3">
                            <h5>Languages</h5>
                            <ul>
                                @foreach (json_decode($volunteer->languages) as $item)
                                    <li>{{ $item }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <h3 class="mb-3 mt-5">Personal identity</h3>
                    <div class="row g-5">
                        <div class="col-6">
                            <label for="">Nasionality</label>
                            <input type="text" class="form-control" value="INDONESIA">
                        </div>

                        <div class="col-6">
                            <label for="">National ID Number</label>
                            <input type="text" class="form-control" value="{{ $volunteer->national_id_number }}">
                        </div>

                        <div class="col-6">
                            <label for="">Gender</label>
                            <input type="text" class="form-control" value="{{ $volunteer->gender }}">
                        </div>

                        <div class="col-6">
                            <label for="">Date of Birth</label>
                            <input type="text" class="form-control" value="{{ $volunteer->date_of_birth }}">
                        </div>

                        <div class="col-12">
                            <label for="">What is your motivation for becoming a volunteer at the 53rd Artistic
                                Gymnastic World Championships?</label>
                            <textarea class="form-control" id="">{{ $volunteer->motivation }}</textarea>
                        </div>

                        <div class="col-12">
                            <label for="">Please describe any volunteering experience you had in the
                                past</label>
                            <textarea class="form-control" id="">{{ $volunteer->experience }}</textarea>
                        </div>

                        <div class="col-12">
                            <label for="">Please describe other sports-related skill you have</label>
                            <textarea class="form-control" id="">{{ $volunteer->sports_skills }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-3">
            <div class="card card-flush">
                <div class="card-body">
                    <img src="{{ $volunteer->urlPhoto }}" class="img-fluid">
                    <button class="btn btn-primary btn-sm col-12 mt-3" data-bs-toggle="modal"
                        data-bs-target="#modalNationalIDScan">Check National ID Scan</button>
                    <a href="{{ route('volunteer-list.cv-file', $volunteer->id) }}" target="_blank"
                        class="btn btn-primary btn-sm col-12 mt-3">View CV</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="formApprove">
                    @csrf
                    <input type="hidden" id="volunteer_id" name="volunteer_id">

                    <div class="modal-header">
                        <h5 class="modal-title">Approve Volunteer</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <input type="hidden" id="volunteer_id" name="volunteer_id">

                        <div class="mb-3">
                            <label class="form-label">Category</label>
                            <select id="category_id" name="category_id" class="form-select select2-category" required>
                                <option value="">-- Select Category --</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Function</label>
                            <select id="function_id" name="function_id" class="form-select select2-function" required>
                                <option value="">-- Select Function --</option>
                            </select>
                        </div>

                        {{-- Ini hanya muncul kalau nationality == "Other" --}}
                        <div class="mb-3 d-none" id="country_wrapper">
                            <label class="form-label">Country</label>
                            <select id="country_id" name="country_id" class="form-select select2-country">
                                <option value="">-- Select Country --</option>
                                @foreach ($countries as $country)
                                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Approve</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    <div class="modal fade" id="modalNationalIDScan" tabindex="-1" data-bs-backdrop="static" role="dialog"
        aria-labelledby="modalTitleId" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitleId">
                        National ID Scan
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body d-flex align-items-center justify-content-center">
                    <img class="img-fluid object-fit-cover" width="225" height="250"
                        src="{{ $volunteer->urlNationalID }}" alt="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection



@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-rc.0/js/select2.min.js"></script>

    @if (empty($volunteer->status))
        <script>
            let titleApprove = "Add Volunteer To Shortlist?"
        </script>
    @elseif ($volunteer->status == 'shortlist')
        <script>
            let titleApprove = "Approve Data Volunteer"
        </script>
    @endif
    <script>
        const InformationUrls = {
            _index: "{{ route('volunteer-list') }}",
            // _approve: "{{ route('volunteer-list.approve', $volunteer->id) }}",
            _approve: "{{ route('volunteer-list.approve', ':id') }}",
            _reject: "{{ route('volunteer-list.reject', $volunteer->id) }}",
        }
        const VolunteerUrls = {
            byCategory: "{{ route('functions.byCategory', ':id') }}"
        };

        $(function() {
            let blockUI = new KTBlockUI(document.getElementById("kt_content"), {
                message: '<div class="blockui-message"><span class="spinner-border text-primary"></span> Loading...</div>',
            })
            $(document).ready(function() {
                // 🔹 init select2 di modal approve
                $('#category_id, #function_id, #country_id').select2({
                    dropdownParent: $('#approveModal'),
                    width: '100%',
                    placeholder: '-- Select Option --',
                    allowClear: true
                });

                // Shortlist
                $(document).on('click', '.btnShortlist', function() {
                    let id = $(this).data('id');

                    Swal.fire({
                        title: 'Are You sure want to shortlist this volunteer?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'Cancel',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            blockUI.block();

                            $.ajax({
                                type: "post",
                                url: InformationUrls._approve.replace(':id', id),
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                dataType: "json",
                                success: function(response) {
                                    if (blockUI.isBlocked()) blockUI.release();

                                    Swal.fire("Volunteer Shortlisted", "",
                                        "success").then(() => {
                                        window.location.href =
                                            InformationUrls._index;
                                    });

                                    // backup redirect
                                    setTimeout(() => {
                                        window.location.href =
                                            InformationUrls._index;
                                    }, 1600);
                                },
                                error: function() {
                                    if (blockUI.isBlocked()) blockUI.release();
                                    Swal.fire("Oops Something Went Wrong", "",
                                        "error");
                                }
                            });
                        }
                    });
                });

                // Approve → show modal
                $(document).on('click', '.btnApprove', function() {
                    let id = $(this).data('id');
                    let nationality = $(this).data(
                        'nationality'); // ambil dari button data attribute

                    $('#volunteer_id').val(id);

                    if (nationality === 'Other') {
                        $('#country_wrapper').removeClass('d-none');
                    } else {
                        $('#country_wrapper').addClass('d-none');
                    }

                    $('#approveModal').modal('show');
                });


                // Category change → load function
                $('#category_id').on('change', function() {
                    let categoryId = $(this).val();
                    if (!categoryId) {
                        $('#function_id').empty().append(
                            '<option value="">-- Select Function --</option>').trigger('change');
                        return;
                    }

                    let url = VolunteerUrls.byCategory.replace(':id', categoryId);

                    $.get(url, function(res) {
                        $('#function_id')
                            .empty()
                            .append('<option value="">-- Select Function --</option>');
                        res.forEach(f => {
                            $('#function_id').append(
                                `<option value="${f.id}">${f.name}</option>`);
                        });
                        $('#function_id').trigger('change'); // refresh select2
                    }).fail(function(xhr) {
                        console.error("❌ Error load functions:", xhr);
                    });
                });

                // Approve submit
                $('#formApprove').on('submit', function(e) {
                    e.preventDefault();

                    Swal.fire({
                        title: 'Are you sure you want to approve this volunteer?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'Cancel',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            blockUI.block();

                            $.ajax({
                                type: "post",
                                url: InformationUrls._approve.replace(':id', $(
                                    '#volunteer_id').val()),
                                data: $(this).serialize(),
                                dataType: "json",
                                success: function(response) {
                                    if (blockUI.isBlocked()) blockUI.release();

                                    $('#approveModal').modal(
                                        'hide'); // tutup modal

                                    Swal.fire("Volunteer Approved", "",
                                        "success").then(() => {
                                        window.location.href =
                                            InformationUrls._index;
                                    });
                                },
                                error: function() {
                                    if (blockUI.isBlocked()) blockUI.release();
                                    Swal.fire("Oops Something Went Wrong", "",
                                        "error");
                                }
                            });
                        }
                    });
                });

            });


            $("#btnActionReject").click(function() {
                Swal.fire({
                    title: 'Reject this data Volunteer?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, Reject',
                    cancelButtonText: 'Cancel',
                }).then((result) => {
                    if (result.isConfirmed) {
                        blockUI.block()
                        $.ajax({
                            type: "post",
                            url: InformationUrls._reject,
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            dataType: "json",
                            success: function(response) {
                                if (blockUI.isBlocked())
                                    blockUI.release()
                                Swal.fire("Data Updated", "", "success").then(() => {
                                    window.location.href = InformationUrls
                                        ._index
                                })
                                setTimeout(() => {
                                    window.location.href = InformationUrls
                                        ._index;
                                }, 1600);
                            },
                            error: function() {
                                if (blockUI.isBlocked())
                                    blockUI.release()
                                Swal.fire("Oops Something Went Wrong", "", "error")
                            }
                        });
                    }
                });
            })
        });
    </script>
@endsection