@extends('layouts.contentNavbarLayoutBackend')

@section('title', 'Career')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('backend-assets/vendor/libs/datatables-fixedcolumns-bs5/fixedcolumns.bootstrap5.css') }}"/>
@endsection

@section('vendor-script')
    <script src="{{ asset('backend-assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('backend-assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
@endsection

@section('page-script')
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Callback the functions
            initializeDataTable();
            getCarers();

            $(document).on('change', '.switch-status', function () {
                const id = $(this).data('id');
                const status = $(this).is(':checked') ? 1 : 0;

                const formData = {
                    id: id,
                    activation: status
                };

                updateStatus(formData);
            });
        });
        // Initialize global variables
        let dataTable, listData = [];
        let cardLoadingIndicator = $('.card-loading-indicator');

        // Show/Hide loading indicator
        function showLoadingIndicator() {
            cardLoadingIndicator.removeClass('d-none');
        }
        function hideLoadingIndicator() {
            cardLoadingIndicator.addClass('d-none');
        }

        // Get careers
        function getCarers() {
            $.ajax({
                url: '{{ route('get-careers') }}',
                type: 'GET',
                dataType: 'JSON',
                beforeSend: function () {
                    showLoadingIndicator();
                },
                success: function (response) {
                    listData = [];
                    listData = response;
                    dataTable.clear().rows.add(listData).draw();
                },
                complete: function () {
                    hideLoadingIndicator();
                }
            });
        }

        // Initialize DataTable
        function initializeDataTable() {
            dataTable = $('.datatables-career').DataTable({
                data: listData,
                columns: [
                    {
                        data: "id",
                        width: 10,
                        render: function (data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: "image",
                        render: function (data) {
                            return (`
                                <div class="avatar avatar-sm">
                                    <img src="${data !== null ? `/uploads/faculty/${data}` : '/backend-assets/img/no-image/no-image.png'}" alt="Avatar" class="rounded">
                                </div>
                            `);
                        }
                    },
                    { data: "title_en" },
                    { data: "title_kh" },
                    { data: "position" },
                    { data: "company" },
                    { data: "tel" },
                    { data: "number" },
                    {
                        data: "start_date",
                        render: function (data) {
                            return moment(data).format('DD-MMM-YYYY');
                        }
                    },
                    {
                        data: "end_date",
                        render: function (data) {
                            return moment(data).format('DD-MMM-YYYY');
                        }
                    },
                    {
                        data: "activation",
                        render: function (data, type, row) {
                            return (`
                                <label class="switch switch-sm switch-primary">
                                    <input type="checkbox" class="switch-input switch-status" data-id="${row.id}" ${data === 1 ? 'checked' : ''}>
                                    <span class="switch-toggle-slider">
                                        <span class="switch-on">
                                            <i class="bx bx-check"></i>
                                        </span>
                                        <span class="switch-off">
                                            <i class="bx bx-x"></i>
                                        </span>
                                    </span>
                                </label>
                            `);
                        }
                    },
                    {
                        data: "id",
                        width: 10,
                        render: function (data) {
                            return (`
                                <a href="/careers/edit/${data}" class="btn btn-icon btn-primary btn-sm" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                                    <span class="tf-icons bx bx-pencil"></span>
                                </a>
                            `);
                        }
                    },
                ],
                columnDefs: [
                    {
                        targets: [-1, -2],
                        orderable: !1,
                    }
                ],
                fixedColumns: {
                    left: 0,
                    right: 1
                },
                drawCallback: function () {
                    $('[data-bs-toggle="tooltip"]').tooltip();
                },
                scrollX: true,
                scrollY: '495px',
                dom: '<"card-header d-flex rounded-0 flex-wrap py-md-0"<"me-5 ms-n2 pe-5"f><"d-flex justify-content-start justify-content-md-end align-items-baseline"<"dt-action-buttons d-flex align-items-start align-items-md-center justify-content-sm-center mb-3 mb-sm-0"lB>>>t<"row mx-2"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
                language: {
                    sLengthMenu: "_MENU_",
                    search: "",
                    searchPlaceholder: "Search Career",
                    info: "Displaying _START_ to _END_ of _TOTAL_ entries",
                },
                buttons: [
                    {
                        extend: "collection",
                        className: "btn btn-label-secondary dropdown-toggle me-3",
                        text: '<i class="bx bx-export me-1"></i>Export',
                        buttons: [
                            {
                                extend: "csv",
                                text: '<i class="bx bx-file me-2" ></i>Csv',
                                className: "dropdown-item"
                            },
                            {
                                extend: "excel",
                                text: '<i class="bx bxs-file-export me-2"></i>Excel',
                                className: "dropdown-item",
                            },
                            {
                                extend: "pdf",
                                text: '<i class="bx bxs-file-pdf me-2"></i>Pdf',
                                className: "dropdown-item"
                            },
                            {
                                extend: "copy",
                                text: '<i class="bx bx-copy me-2" ></i>Copy',
                                className: "dropdown-item"
                            },
                        ],
                    },
                    {
                        text: '<i class="bx bx-plus me-0 me-sm-1"></i><span class="d-none d-sm-inline-block">Add New</span>',
                        className: "add-new btn btn-primary",
                        action: function () {
                            window.location.href = "{{ route('careers.create') }}";
                        },
                    },
                ],
            });
            $(".dataTables_length").addClass("mt-0 mt-md-3 me-3");
            $(".dt-buttons > .btn-group > button").removeClass("btn-secondary");
            $(".dt-buttons").addClass("d-flex flex-wrap");
            $(".dataTables_filter .form-control").removeClass("form-control-sm");
            $(".dataTables_length .form-select").removeClass("form-select-sm");
        }

        // Update Status
        function updateStatus(formData) {
            $.ajax({
                url: '{{ route('careers.update-status') }}',
                type: 'POST',
                data: formData,
                success: function (response) {
                    if (response.status === 'success') {
                        toastr.success(response.message);
                        getCarers();
                    } else {
                        toastr.error(response.message);
                    }
                }
            });
        }
    </script>
@endsection

@section('content')
    <div class="card" style="height: 670px">
        <div class="card-loading-indicator position-absolute w-100 h-100 z-5 bg-navbar-theme d-flex justify-content-center align-items-center rounded">
            <div class="spinner-border spinner-border-lg text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="card-datatable table-responsive text-nowrap">
            <table class="datatables-career table border-top">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Image</th>
                    <th>Title in English</th>
                    <th>Title in Khmer</th>
                    <th>Position</th>
                    <th>Company</th>
                    <th>Tel</th>
                    <th>Number of Require</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Status</th>
                    <th>Action</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection