@extends('layout.base')

@section('action')
@endsection
<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>

@section('content')
    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            @if($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach($errors->all() as $err)
                            <li>{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Add Data</h3>
            </div>
        </div>
        <div class="card-body">
            <form id="nominativeForm" method="POST" action="{{ route('accreditation.nominative-store') }}" enctype="multipart/form-data">
                @csrf
                <h5>Personal Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label class="form-label d-block required">Title</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="title" id="titleMr" value="Mr"
                                required onchange="syncGenderWithTitle('Mr')">
                            <label class="form-check-label" for="titleMr">Mr</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="title" id="titleMrs" value="Mrs"
                                required onchange="syncGenderWithTitle('Mrs')">
                            <label class="form-check-label" for="titleMrs">Mrs</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="title" id="titleMs" value="Ms"
                                required onchange="syncGenderWithTitle('Ms')">
                            <label class="form-check-label" for="titleMrs">Ms</label>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label class="form-label d-block required">Gender</label>
                        <div class="form-check form-check-inline ">
                            <input class="form-check-input" type="radio" name="gender" id="genderMale" value="male"
                                required>
                            <label class="form-check-label" for="genderMale">Male</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="gender" id="genderFemale" value="female"
                                required>
                            <label class="form-check-label" for="genderFemale">Female</label>
                        </div>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="first_name" class="required">First Name</label>
                        <input type="text" name="first_name" class="form-control" maxlength="50" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="last_name" class="required">Last Name</label>
                        <input type="text" name="last_name" class="form-control" maxlength="50" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="date_of_birth" class="required">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-control" required>
                    </div>

                    <div class="col-6 mb-3">
                        <div class="d-flex flex-row gap-5 flex-wrap m-1" style="gap: 2.5rem;">
                            <div class="d-flex align-items-start" style="max-width: 250px;">
                                <img src="{{ asset('media/photos-format-guide.png') }}" style="max-width: 90px; height: auto;" alt="Photos format guide" />
                                <div class="ms-1">
                                    <span class="fw-bold">Photos format:</span>
                                    <ol class="mb-0" style="font-size: 0.75em;">
                                        <li>File format using *.JPEG/ .JPG/ .PNG in color.</li>
                                        <li>Min. 400×600px.</li>
                                        <li>Max. size 2Mb</li>
                                        <li>Proper composition.</li>
                                    </ol>
                                </div>
                            </div>
                            <div class="d-flex align-items-start" style="max-width: 250px;">
                                <img src="{{ asset('media/photos-composition-guide.png') }}" style="max-width: 90px; height: auto;" alt="Photos composition guide" />
                                <div class="ms-1" style="font-size: 0.75em;">
                                    <span class="fw-bold d-block mb-1">Photo composition:</span>
                                    <span style="display: block; word-break: break-word;">
                                        The top of the head, including the hair, to the bottom of the chin must be between 50% and 60% of the image's total height. The eye height (measured from the bottom of the image to the level of the eyes) should be between 50% and 60% of the image's height.
                                    </span>
                                </div>
                            </div>
                            <div class="d-flex align-items-start" style="max-width: 250px;">
                                <img src="{{ asset('media/photos-unrecommended-guide.png') }}" style="max-width: 90px; height: auto;" alt="Unrecommended photo guide" />
                                <div class="ms-1">
                                    <span class="fw-bold">Unrecommended Photo</span>
                                    <ol class="mb-0" style="font-size: 0.75em;">
                                        <li>Blurry Photo.</li>
                                        <li>Others than face photo.</li>
                                        <li>Expression face photo.</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                        <label for="picture" class="required">Picture</label>
                        <input type="file" name="picture" class="form-control" accept="image/*" required>
                        <small class="form-text text-muted">Allowed file types: JPG, PNG. Max size: 2MB.</small>
                        <small id="pictureError" class="text-danger d-none">Invalid file type or size exceeds 5MB.</small>
                    </div>
                </div>

                <h5>Contact Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label for="email" class="required">Email Address</label>
                        <input type="email" name="email" class="form-control" maxlength="100" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="mobile_number" class="required">Mobile Number</label>
                        <input type="tel" name="mobile_number" class="form-control" maxlength="20" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="office_number">Office Number</label>
                        <input type="tel" name="office_number" class="form-control" maxlength="20">
                    </div>
                </div>

                <h5>Professional Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label for="organisation" class="required">Organization</label>
                        <input type="text" name="organisation" class="form-control" required>
                    </div>

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

                    <div class="col-6 mb-3">
                        <label for="function" class="required">Function</label>
                        <select class="form-control select2-function" name="function" required>
                            <option value="">-- Select Function --</option>
                            @foreach ($function as $func)
                                <option value="{{ $func->id }}">{{ $func->name }}</option>
                            @endforeach
                        </select>
                    </div>


                    <div class="col-6 mb-3">
                        <label for="job_title" class="required">Job Title</label>
                        <input type="text" name="job_title" class="form-control" maxlength="100" required>
                    </div>
                </div>

                <h5>Identification Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label for="nationality" class="required">Nationality</label>
                        <select class="form-control select2-nationality" name="nationality" required>
                            <option value="">-- Select Country --</option>
                            @foreach ($countries as $country)
                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="document_type" class="required">Document Type</label>
                        <input type="text" name="document_type" class="form-control" maxlength="50" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="number_of_id" class="required">Number of ID</label>
                        <input type="text" name="number_of_id" class="form-control" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="issue_date" class="required">Issue Date</label>
                        <input type="date" name="issue_date" class="form-control" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="expiration_date" class="required">Expiration Date</label>
                        <input type="date" name="expiration_date" class="form-control" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="upload_id" class="required">Upload ID</label>
                        <input type="file" name="upload_id" class="form-control" accept=".jpeg,.jpg,.png,.pdf" required>
                        <small class="form-text text-muted">Allowed file types: JPG, PNG, PDF. Max size: 2MB.</small>
                        <small id="uploadError" class="text-danger d-none">Invalid file type or size exceeds 5MB.</small>
                    </div>
                </div>

                <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
            </form>

        </div>
    </div>

    @include('accreditation.elements.print_card')
    @include('accreditation.elements.matrix')
@endsection

@section('scripts')
    <script>
        const CompactUrls = {
            _datatable: "{{ route('accreditation.datatable') }}",
            _edit: "{{ route('accreditation.update', ':id') }}",
            _destroy: "{{ route('accreditation.destroy', ':id') }}",
        }
    </script>

    <script>
        function syncGenderWithTitle(title) {
            if (title === 'Mr') {
                document.getElementById('genderMale').checked = true;
            } else if (title === 'Mrs' || title === 'Ms') {
                document.getElementById('genderFemale').checked = true;
            }
        }

        $(document).ready(function() {
            $('.select2-category').select2({
                placeholder: 'Select a category',
                width: '100%'
            });

            $('.select2-function').select2({
                placeholder: 'Select a function',
                width: '100%'
            });

            $('.select2-nationality').select2({
                placeholder: 'Select a country',
                width: '100%'
            });
        });

        $('.select2-category').select2({
            placeholder: 'Select a category',
            width: '100%'
        }).next('.select2-container').addClass('form-control');

        $('.select2-function').select2({
            placeholder: 'Select a function',
            width: '100%'
        }).next('.select2-container').addClass('form-control');

        $('.select2-nationality').select2({
            placeholder: 'Select a country',
            width: '100%'
        }).next('.select2-container').addClass('form-control');

        $('#nominativeForm').on('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const submitBtn = $('#submitBtn');
            
            submitBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Submitting...');
            
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message || 'Accreditation added successfully!',
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            window.location.href = "{{ route('accreditation.nominative') }}";
                        });
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message || 'Something went wrong!',
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Something went wrong!';
                    
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.responseJSON && xhr.responseJSON.errors) {
                        // Handle validation errors
                        const errors = xhr.responseJSON.errors;
                        const errorList = Object.values(errors).flat().join('<br>');
                        errorMessage = errorList;
                    }
                    
                    Swal.fire({
                        title: 'Error!',
                        html: errorMessage,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    });
                },
                complete: function() {
                    // Re-enable submit button
                    submitBtn.prop('disabled', false).html('Submit');
                }
            });
        });

        $(function() {
            let table = $("#datatableAccreditation").DataTable({
                "scrollY": true,
                "scrollX": true,
                "scrollCollapse": true,
                serverSide: true,
                processing: true,
                ajax: {
                    url: CompactUrls._datatable,
                },
                columns: [{
                        data: "id",
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return `
                            <button class="btn btn-sm btn-primary btn-icon print-card" data-id="${data}" data-bs-toggle="modal" data-bs-target="#modalPrint">
                                <i class="fa fa-check"></i>
                            </button>
                            <button class="btn btn-sm btn-danger btn-icon delete-data" data-id="${data}">
                                <i class="fa fa-trash"></i>
                            </button>
                        `;
                        }
                    },
                    {
                        data: 'title'
                    },
                    {
                        data: 'first_name'
                    },
                    {
                        data: 'last_name'
                    },
                    {
                        data: 'date_of_birth'
                    },
                    {
                        data: 'gender'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'category'
                    },
                    {
                        data: 'function'
                    },
                    {
                        data: 'job_title'
                    },
                    {
                        data: 'nationality'
                    },
                    {
                        data: 'document_type'
                    },
                    {
                        data: 'number_of_id'
                    },
                    {
                        data: 'issue_date'
                    },
                    {
                        data: 'expiration_date'
                    },
                    {
                        data: 'upload_id'
                    },
                    {
                        data: 'accred_status'
                    },
                    {
                        data: 'security_status'
                    },
                    {
                        data: 'badge_status'
                    },
                    {
                        data: 'badge_type'
                    }
                ]
            });

            document.querySelector('input[name="picture"]').addEventListener('change', function(event) {
                const file = event.target.files[0];
                const allowedExtensions = ['image/jpeg', 'image/png'];
                const maxSize = 5 * 1024 * 1024; // 2MB
                const errorElement = document.getElementById('pictureError');

                if (file && (!allowedExtensions.includes(file.type) || file.size > maxSize)) {
                    errorElement.classList.remove('d-none');
                    event.target.value = ''; // Clear the input
                } else {
                    errorElement.classList.add('d-none');
                }
            });
            document.querySelector('input[name="upload_id"]').addEventListener('change', function(event) {
                const file = event.target.files[0];
                const allowedExtensions = ['image/jpeg', 'image/png', 'application/pdf'];
                const maxSize = 5 * 1024 * 1024; // 2MB
                const errorElement = document.getElementById('uploadError');

                if (file && (!allowedExtensions.includes(file.type) || file.size > maxSize)) {
                    errorElement.classList.remove('d-none');
                    event.target.value = ''; // Clear the input
                } else {
                    errorElement.classList.add('d-none');
                }
            });

            $(document).ready(function() {
                var baseUrl = "{{ route('accreditation.get-function', ['category_id' => '__id__']) }}";

                $('.select2-category').on('change', function() {
                    var categoryID = $(this).val();

                    if (categoryID) {
                        var url = baseUrl.replace('__id__', categoryID);

                        $.ajax({
                            url: url,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {
                                $('.select2-function').empty();
                                $('.select2-function').append(
                                    '<option value="">-- Select Function --</option>'
                                );
                                $.each(data, function(key, value) {
                                    $('.select2-function').append(
                                        '<option value="' + value.id +
                                        '">' + value.name + '</option>');
                                });
                            }
                        });
                    } else {
                        $('.select2-function').empty();
                        $('.select2-function').append(
                            '<option value="">-- Select Function --</option>');
                    }
                });
            });

            // Print button
            $(document).on('click', '.print-card', function() {
                let id = $(this).data('id');
                let url = CompactUrls._edit.replace(":id", id);
                let col = $(this).closest('tr');
                let data = table.row(col).data(); // Get row data

                // Populate modal with data
                $("#modalPrint").find("form").attr("action", url);
                $("#modalPrint").find("input[name='title']").val(data.title);
                $("#modalPrint").find("input[name='first_name']").val(data.first_name);
                $("#modalPrint").find("input[name='last_name']").val(data.last_name);
                // You can populate other modal fields here similarly

                $("#modalPrint").modal('show');
            });

            // Delete button
            $(document).on('click', '.delete-data', function() {
                let id = $(this).data('id');

                Swal.fire({
                    title: 'Are you sure you want to delete this data?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Delete',
                    cancelButtonText: 'Cancel',
                }).then((result) => {
                    if (result.isConfirmed) {
                        let deleteUrl = CompactUrls._destroy.replace(':id', id);
                        // Assuming you have a form to submit for deletion
                        $("#formDeleteAccreditation").attr('action', deleteUrl);
                        $("#formDeleteAccreditation").submit();
                    }
                });
            });
        });
    </script>
@endsection