@extends('layout.base')

@section('action')
@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>
    <div class="card card-flush">
        <!--begin::Card header-->
        <div class="card-header">
            <!--begin::Card title-->
            <div class="card-title flex-column">
                <h3 class="fw-bold mb-1">Edit Data</h3>
            </div>
        </div>

        {{-- <div class="card"> --}}
        <div class="card-body">
            <form id="accreditationForm" method="POST" action="{{ route('accreditation.update', $accreditation->id) }}"
                enctype="multipart/form-data">
                @csrf
                <h5>Personal Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label for="title">Title (Mr/Mrs)</label>
                        <input type="text" name="title" class="form-control"
                            value="{{ old('title', $accreditation->title) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="gender">Gender</label>
                        <select name="gender" class="form-control" required>
                            <option value="male" {{ $accreditation->gender == 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ $accreditation->gender == 'female' ? 'selected' : '' }}>Female
                            </option>
                        </select>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="first_name">First Name</label>
                        <input type="text" name="first_name" class="form-control"
                            value="{{ old('first_name', $accreditation->first_name) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="last_name">Last Name</label>
                        <input type="text" name="last_name" class="form-control"
                            value="{{ old('last_name', $accreditation->last_name) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="date_of_birth">Date of Birth</label>
                        <input type="date" name="date_of_birth" class="form-control"
                            value="{{ old('date_of_birth', $accreditation->date_of_birth) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="picture">Picture</label>
                        <input type="file" name="picture" class="form-control" accept="image/*">
                        @if ($accreditation->picture)
                            <small>Current: <a href="{{ asset('storage/' . $accreditation->picture) }}"
                                    target="_blank">View</a></small>
                        @endif
                    </div>
                </div>

                <h5>Contact Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label for="email">Email Address</label>
                        <input type="email" name="email" class="form-control"
                            value="{{ old('email', $accreditation->email) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="mobile_number">Mobile Number</label>
                        <input type="tel" name="mobile_number" class="form-control"
                            value="{{ old('mobile_number', $accreditation->mobile_number) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="office_number">Office Number</label>
                        <input type="tel" name="office_number" class="form-control"
                            value="{{ old('office_number', $accreditation->office_number) }}">
                    </div>
                </div>

                <h5>Professional Information</h5>
                <div class="row mb-3">
                    <div class="col-6 mb-3">
                        <label for="organisation">Organization</label>
                        <input type="text" name="organisation" class="form-control"
                            value="{{ old('organisation', $accreditation->organisation) }}" required>
                    </div>

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

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


                    <div class="col-6 mb-3">
                        <label for="job_title">Job Title</label>
                        <input type="text" name="job_title" class="form-control"
                            value="{{ old('job_title', $accreditation->job_title) }}" required>
                    </div>
                </div>

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

                    <div class="col-6 mb-3">
                        <label for="document_type">Document Type</label>
                        <input type="text" name="document_type" class="form-control"
                            value="{{ old('document_type', $accreditation->document_type) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="number_of_id">Number of ID</label>
                        <input type="text" name="number_of_id" class="form-control"
                            value="{{ old('number_of_id', $accreditation->number_of_id) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="issue_date">Issue Date</label>
                        <input type="date" name="issue_date" class="form-control"
                            value="{{ old('issue_date', $accreditation->issue_date) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="expiration_date">Expiration Date</label>
                        <input type="date" name="expiration_date" class="form-control"
                            value="{{ old('expiration_date', $accreditation->expiration_date) }}" required>
                    </div>

                    <div class="col-6 mb-3">
                        <label for="upload_id">Upload ID</label>
                        <input type="file" name="upload_id" class="form-control" accept="image/*,application/pdf">
                        @if ($accreditation->upload_id)
                            <small>Current: <a href="{{ asset('storage/' . $accreditation->upload_id) }}"
                                    target="_blank">View</a></small>
                        @endif
                    </div>
                </div>

                <button type="submit" id="submitBtn" class="btn btn-primary">Update</button>
            </form>
        </div>
        {{-- </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>
        $(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');

        $('#accreditationForm').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 updated 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'
                    }
                ]
            });

            // 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