@extends('layout.base')

@section('action')
    <button type="button" class="btn btn-light-primary btn-sm rounded" data-bs-toggle="modal" data-bs-target="#modalAddMatrix">
        <i class="fas fa-plus"></i> Add Matrix
    </button>
@endsection
@section('content')
    <style>
        .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;
        }

        #tableMatrix {
            border-collapse: collapse;
            width: 100%;
            table-layout: auto;
            /* auto biar ngikutin isi, dan gak nabrak */
        }

        #tableMatrix th {
            padding: 10px 12px;
            text-align: left;
            /* Header rata kiri */
            white-space: nowrap;
            vertical-align: middle;
            border: 1px solid #dee2e6;
            background-color: #f8f9fa;
        }

        #tableMatrix td {
            padding: 10px 12px;
            text-align: center;
            /* Isi tetap tengah */
            white-space: nowrap;
            vertical-align: middle;
            border: 1px solid #dee2e6;
        }



        #tableMatrix thead th {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }

        .dataTables_wrapper {
            overflow-x: auto;
        }

        /* Kolom ke-4: Transport */
        #tableMatrix th:nth-child(4) {
            width: 90px;
            text-align: left !important;
            padding-left: 16px;
        }

        #tableMatrix td:nth-child(4) {
            text-align: center;
            vertical-align: middle;
        }

        #tableMatrix thead th {
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }



        input[type="checkbox"] {
            transform: scale(1.3);
            margin: 2px;
            cursor: pointer;
        }

        input[type="checkbox"]:checked {
            accent-color: green;
        }
    </style>

    <div class="row">
        <div class="card">
            <div class="card-body">
                {{-- <table class="table table-bordered">
                <thead>
                    <tr>
                        <td rowspan="2">Cat.</td>
                        <td rowspan="2">Colour</td>
                        <td rowspan="2">Functions</td>
                        <td rowspan="2">T</td>
                        <td colspan="8" align="center">Zones</td>
                    </tr>
                    <tr class="text-center">
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                        <td>15</td>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($matrix as $item)
                    <tr>
                        <td>{{ $item->category }}</td>
                        <td>{{ $item->color }}</td>
                        <td>{{ $item->job_function }}</td>
                        <td>{{ $item->transport }}</td>
                        <td>{{ ($item->zona_1 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_2 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_3 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_4 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_5 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_6 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_7 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_8 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_9 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_10 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_11 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_12 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_13 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_14 == '1') ? 'X' : '' }}</td>
                        <td>{{ ($item->zona_15 == '1') ? 'X' : '' }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table> --}}
                <div style="overflow-x: auto;">
                    <table class="table table-bordered table-striped" id="tableMatrix" style="width: 100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Action</th>
                                <th>Category</th>
                                <th>Function</th>
                                <th>Insurance</th>
                                <th>Transport</th>
                                @for ($i = 1; $i <= 15; $i++)
                                    <th>Zone {{ $i }}</th>
                                @endfor
                            </tr>
                        </thead>
                        <tbody></tbody> {{-- DataTables akan isi ini --}}
                    </table>
                </div>
            </div>
        </div>
    </div>

    @include('secretariat.elements.add_matrix')
    @include('secretariat.elements.edit_matrix')
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#tableMatrix').DataTable({
                processing: true,
                serverSide: true,
                autoWidth: false,
                ajax: '{{ route('datamastering.datatableMatrixZone') }}',
                scrollX: true,
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex'
                    },
                    {
                        data: 'action',
                        name: 'action'
                    },
                    {
                        data: 'category',
                        name: 'category'
                    },
                    {
                        data: 'function_name',
                        name: 'function_name'
                    },
                    {
                        data: 'insurance',
                        name: 'insurance'
                    },
                    {
                        data: 'transport',
                        name: 'transport'
                    },
                    @for ($i = 1; $i <= 15; $i++)
                        {
                            data: 'zona_{{ $i }}',
                            name: 'zona_{{ $i }}'
                        },
                    @endfor
                ]
            });
        });

        $(document).on('change', '.matrix-checkbox', function() {
            let id = $(this).data('id');
            let zone = $(this).data('zone');
            let isChecked = $(this).is(':checked');
            let value = isChecked ? 1 : null;

            $.ajax({
                url: '{{ route('datamastering.updateMatrixZone') }}',
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    zone: zone,
                    value: value
                },
                success: function() {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: `Zone ${zone.replace('zona_', '')} updated`,
                        showConfirmButton: false,
                        timer: 1500
                    });
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops!',
                        text: 'Failed to update zone. Please try again.',
                        timer: 2000
                    });
                }
            });
        });

        job_function_id

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

        $('#formAddMatrix').on('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);

            $.ajax({
                url: "{{ route('matrix.store') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    $('#modalAddMatrix').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: res.message,
                        confirmButtonText: 'OK'
                    }).then(() => {
                        $('#tableMatrix').DataTable().ajax.reload();
                        $('#formAddMatrix')[0].reset();
                    });
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        let errorText = '';
                        $.each(errors, function(key, value) {
                            errorText += value[0] + '<br>';
                        });

                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            html: errorText,
                            confirmButtonText: 'OK'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Something went wrong. Please try again.',
                            confirmButtonText: 'OK'
                        });
                    }
                }
            });
        });

        // Load Data ke Modal
        $(document).on('click', '.edit-matrix', function() {
            let id = $(this).data('id'); // <--- ini definisi id

            // Baru boleh dipakai di sini
            $.get("{{ route('matrix.edit', ':id') }}".replace(':id', id), function(res) {
                const data = res.matrix;
                const functions = res.functions;

                const $select = $('#edit_job_function_id');
                $select.empty();
                $select.append(`<option value="">-- Select Function --</option>`);

                functions.forEach(f => {
                    $select.append(`<option value="${f.id}">${f.name}</option>`);
                });

                $select.val(data.job_function_id);
                $('#edit_matrix_id').val(data.id);
                $('#edit_transport').val(data.transport);
                $('#edit_insurance').val(data.insurance);

                for (let i = 1; i <= 15; i++) {
                    $(`#edit_zona_${i}`).prop('checked', data[`zona_${i}`] == 1);
                }

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

        // Submit Update
        $('#formEditMatrix').on('submit', function(e) {
            e.preventDefault();

            let formData = new FormData(this);

            $.ajax({
                url: "{{ route('matrix.update') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(res) {
                    $('#modalEditMatrix').modal('hide');
                    Swal.fire({
                        icon: 'success',
                        title: 'Success',
                        text: res.message
                    }).then(() => {
                        $('#tableMatrix').DataTable().ajax.reload();
                    });
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let html = '';
                        $.each(errors, function(key, value) {
                            html += value[0] + '<br>';
                        });
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            html: html
                        });
                    }
                }
            });
        });

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

            Swal.fire({
                title: 'Are you sure?',
                text: 'This matrix will be permanently deleted.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.post("{{ route('matrix.destroy') }}", {
                            _token: '{{ csrf_token() }}',
                            id: id
                        })
                        .done(function(res) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: res.message
                            }).then(() => {
                                $('#tableMatrix').DataTable().ajax.reload();
                            });
                        })
                        .fail(function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error!',
                                text: 'Something went wrong while deleting.'
                            });
                        });
                }
            });
        });
    </script>
@endsection