@extends('layout.base')

@section('action')
    <div class="dropdown">
        <button class="btn btn-light-primary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            Add Data
        </button>
        <ul class="dropdown-menu">
            <li>
                <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalAddCategory">Category</button>
            </li>
            <li>
                <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalAddFunction">Function</button>
            </li>
            <li>
                <button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modalAddCountry">Country</button>
            </li>
        </ul>
    </div>
@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>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="card card-flush">
        <div class="card-header card-header-stretch">
            <h3 class="card-title">Data Mastering</h3>
            <div class="card-toolbar">
                <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#kt_tab_pane_7">Category</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_8">Function</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#kt_tab_pane_9">Countries</a>
                    </li>

                </ul>
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="kt_tab_pane_7" role="tabpanel">
                    <table class="table table-stripped" id="tableCategory">
                        <thead>
                            <tr>
                                <td>No</td>
                                <td>Color</td>
                                <td>Name</td>
                                <td>Action</td>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="tab-pane fade" id="kt_tab_pane_8" role="tabpanel">
                    <table class="table table-stripped" id="tableFunction">
                        <thead>
                            <tr>
                                <td>No</td>
                                <td>Color</td>
                                <td>Category</td>
                                <td>Job Function</td>
                                <td>Action</td>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="tab-pane fade" id="kt_tab_pane_9" role="tabpanel">
                    <table class="table table-stripped" id="tableCountries">
                        <thead>
                            <tr>
                                <td>No</td>
                                <td>Flag</td>
                                <td>Name</td>
                                <td>Code</td>
                                <td>Gymnastic Code</td>
                                <td>Action</td>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('data-mastering.elements.add_category')
    @include('data-mastering.elements.add_function')
    @include('data-mastering.elements.add_country')
    @include('data-mastering.elements.edit_category')
    @include('data-mastering.elements.edit_function')
    @include('data-mastering.elements.edit_country')
@endsection

@section('scripts')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        const CompactUrls = {
            _datatableFunction: "{{ route('data-mastering.datatable_function') }}",
            _datatableCategory: "{{ route('data-mastering.datatable_category') }}",
            _datatableCountries: "{{ route('data-mastering.datatable_countries') }}",
        };

        $('#category_id').select2({
            dropdownParent: $('#modalAddFunction'),
            placeholder: 'Select a category',
            width: '100%',
            minimumResultsForSearch: 0 // <--- always show search
        });


        let tableCategory = $("#tableCategory").DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: CompactUrls._datatableCategory,
            },
            order: [
                [1, 'asc']
            ],
            columns: [{
                    data: 'DT_RowIndex',
                    className: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    className: "text-center",
                },

                {
                    data: "color",
                    name: "category.color"
                },
                {
                    data: "name",
                    name: "category.name"
                }, {
                    data: "id",
                    orderable: false,
                    searchable: false,
                    className: "text-center",
                    render: function(data, type, row) {
                        return `
            <button class="btn btn-sm btn-warning btn-edit-category" data-id="${data}">Edit</button>
            <button class="btn btn-sm btn-danger btn-delete-category" data-id="${data}">Delete</button>
        `;
                    }
                },
            ]
        });

        let tableFunction = $("#tableFunction").DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: CompactUrls._datatableFunction,
            },
            order: [
                [1, 'asc']
            ],
            columns: [{
                    data: 'DT_RowIndex',
                    className: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    className: "text-center",
                },

                {
                    data: "color",
                    name: "category_id"
                },
                {
                    data: "category",
                    name: "category_id"
                },
                {
                    data: "name",
                    name: "name"
                },
                {
                    data: "id",
                    orderable: false,
                    searchable: false,
                    className: "text-center",
                    render: function(data, type, row) {
                        return `
            <button class="btn btn-sm btn-warning btn-edit-function" data-id="${data}">Edit</button>
            <button class="btn btn-sm btn-danger btn-delete-function" data-id="${data}">Delete</button>
        `;
                    }
                }
            ]
        });

        let tableCountries = $("#tableCountries").DataTable({
            serverSide: true,
            processing: true,
            ajax: {
                url: CompactUrls._datatableCountries,
            },
            order: [
                [1, 'asc']
            ],
            columns: [{
                    data: 'DT_RowIndex',
                    className: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    title: '#',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'flag',
                    name: 'flag',
                    title: 'Flag',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name',
                    title: 'Name'
                },
                {
                    data: 'code',
                    name: 'code',
                    title: 'Code'
                },
                {
                    data: 'code_gymnastic',
                    name: 'code_gymnastic',
                    title: 'Gym Code'
                },
                {
                    data: "id",
                    orderable: false,
                    searchable: false,
                    className: "text-center",
                    render: function(data, type, row) {
                        return `
        <button class="btn btn-sm btn-warning btn-edit-countries" 
            data-id="${row.id}" 
            data-name="${row.name}" 
            data-code="${row.code}" 
            data-code_gymnastic="${row.code_gymnastic}" 
            data-flag_path="${row.flag_path}">
            Edit
        </button>
        <button class="btn btn-sm btn-danger btn-delete-countries" data-id="${row.id}">
            Delete
        </button>
    `;
                    }

                }
            ]
        });

        $(document).on('click', '.btn-edit-category', function() {
            const id = $(this).data('id');
            const url = `{{ route('data-mastering.show_category', ':id') }}`.replace(':id', id);

            $.get(url, function(res) {
                $('#category_id').val(res.id);
                $('#category_name').val(res.name);
                $('#category_color').val(res.color);
                $('#modalCategory').modal('show').on('shown.bs.modal', function() {
                    $('#category_name').trigger('focus');
                });
            });
        });

        $('#formAddCategory').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('data-mastering.storeCategory') }}",
                method: "POST",
                data: $(this).serialize(),
                success: function(res) {
                    Swal.fire('Success!', 'Category successfully added.', 'success').then(() => location
                        .reload());
                },
                error: function(err) {
                    Swal.fire('Error!', 'There was an issue saving the category.', 'error');
                }
            });
        });


        $('#formCategory').on('submit', function(e) {
            e.preventDefault();
            const id = $('#category_id').val();
            const name = $('#category_name').val();
            const color = $('#category_color').val();

            console.log('SUBMIT DATA:', {
                name,
                color
            });

            const url = `{{ route('data-mastering.update_category', ':id') }}`.replace(':id', id);

            $.ajax({
                url: url,
                type: 'PUT',
                data: {
                    name: name,
                    color: color,
                },
                success: function(res) {
                    $('#modalCategory').modal('hide');
                    tableCategory.ajax.reload();
                    Swal.fire('Berhasil', res.message, 'success');
                }

            });
        });


        $(document).on('click', '.btn-delete-category', function() {
            const id = $(this).data('id');
            const url = `{{ route('data-mastering.delete_category', ':id') }}`.replace(':id', id);

            Swal.fire({
                title: 'Are you sure you want to delete?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        success: function() {
                            tableCategory.ajax.reload();
                            Swal.fire('Deleted!', '', 'success');
                        }
                    });
                }
            });
        });


        $(document).on('click', '.btn-edit-function', function() {
            const id = $(this).data('id');
            const url = `{{ route('data-mastering.show_function', ':id') }}`.replace(':id', id);

            $.get(url, function(res) {
                $('#function_id').val(res.id);
                $('#function_name').val(res.name);
                $('#function_category').val(res.category_id);
                $('#modalFunction').modal('show');
            });
        });

        $('#formAddFunction').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: "{{ route('data-mastering.storeFunction') }}",
                method: "POST",
                data: $(this).serialize(),
                success: function(res) {
                    Swal.fire('Success!', 'Function successfully added.', 'success').then(() => location
                        .reload());
                },
                error: function(err) {
                    Swal.fire('Error!', 'There was an issue saving the function.', 'error');
                }
            });
        });

        $('#formFunction').on('submit', function(e) {
            e.preventDefault();
            const id = $('#function_id').val();
            const url = `{{ route('data-mastering.update_function', ':id') }}`.replace(':id', id);

            $.ajax({
                url: url,
                type: 'PUT',
                data: {
                    name: $('#function_name').val(),
                    category_id: $('#function_category').val(),
                },
                success: function() {
                    $('#modalFunction').modal('hide');
                    tableFunction.ajax.reload();
                }
            });
        });


        $(document).on('click', '.btn-delete-function', function() {
            const id = $(this).data('id');
            const url = `{{ route('data-mastering.delete_function', ':id') }}`.replace(':id', id);

            Swal.fire({
                title: 'Are you sure you want to delete?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        success: function() {
                            tableFunction.ajax.reload();
                            Swal.fire('Deleted!', '', 'success');
                        },
                        error: function() {
                            Swal.fire('Failed to delete data', '', 'error');
                        }
                    });
                }
            });
        });


        $('#formAddCountry').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('data-mastering.storeCountry') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    Swal.fire('Success!', 'Country successfully added.', 'success').then(() => location
                        .reload());
                },
                error: function(err) {
                    Swal.fire('Error!', 'Something went wrong.', 'error');
                }
            });
        });
        $(document).on('click', '.btn-edit-countries', function() {
            $('#editCountryId').val($(this).data('id'));
            $('#editName').val($(this).data('name'));
            $('#editCode').val($(this).data('code'));
            $('#editCodeGymnastic').val($(this).data('code_gymnastic'));
            $('#modalEditCountry').modal('show');
        });

        $('#formEditCountry').on('submit', function(e) {
            e.preventDefault();
            let formData = new FormData(this);
            $.ajax({
                url: '{{ route('datamastering.updateCountry') }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(res) {
                    Swal.fire('Updated!', 'Country successfully updated.', 'success').then(() =>
                        location.reload());
                },
                error: function() {
                    Swal.fire('Error!', 'Failed to update country.', 'error');
                }
            });
        });

        $(document).on('click', '.btn-delete-countries', function() {
            let id = $(this).data('id');
            Swal.fire({
                title: 'Are you sure you want to delete?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route('datamastering.deleteCountry') }}',
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            id: id
                        },
                        success: function() {
                            Swal.fire('Deleted!', 'Country has been deleted.', 'success').then(
                                () => location.reload());
                        },
                        error: function() {
                            Swal.fire('Error!', 'Failed to delete country.', 'error');
                        }
                    });
                }
            });
        });
    </script>
@endsection