{{ View::make('layout.header') }}
<style>
    .fc-right .fc-state:hover {
        background-color: #fff !important;

    }

    .fc-right .fc-button {
        padding: 0.438rem 0.5rem !important;
        background: #fff !important;
        border-color: #7367f0 !important;
        color: #7367f0;
        height: 100%;
    }

    .fc-right .fc-state-active {
        background-color: rgba(115, 103, 240, 0.2) !important;
        border-color: #7367f0 !important;
        color: #7367f0;
        z-index: 1 !important;
    }

    .fc-next-button,
    .fc-prev-button {
        background: #fff !important;
    }

    .fc-month-button,
    .fc-agendaWeek-button {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .fc-agendaWeek-button,
    .fc-agendaDay-button {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;

    }

    .fc-icon-left-single-arrow:after,
    .fc-icon-right-single-arrow:after {
        top: -10% !important;
    }

    .fc-icon-left-single-arrow:after {
        font-size: 135% !important;
        font-weight: inherit !important;
        content: "\e900" !important;
    }

    .fc-icon-right-single-arrow:after {
        font-size: 135% !important;
        font-weight: inherit !important;
        content: "\e901" !important;
    }

    .fc-state-default {
        box-shadow: none !important;
    }

    .fc-content .fc-title {
        color: #fff;
        font-size: 11px;
        white-space: break-spaces !important;
    }

    .fc-right .fc-button-group {
        width: 60% !important;
        float: right !important;
    }

    @media only screen and (min-width: 768px) {

        .fc-left,
        .fc-right {
            width: 50% !important;
        }

        .app-calendar .fc-popover {
            left: 50% !important;
            top: 30% !important;
        }
    }

    @media only screen and (max-width: 768px) {

        .fc-left,
        .fc-right {
            width: 100% !important;
        }

        .app-calendar .fc-popover {
            left: 20% !important;
            top: 40% !important;
        }
    }
</style>
<!-- BEGIN: Content-->
<div class="app-content content ">
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">HR
                                </li>
                                <li class="breadcrumb-item"><a href="{{ route('setup') }}">Setup</a>
                                </li>
                                <li class="breadcrumb-item active"><a href="#">Department / Category / Branch</a>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="multiple-column-form">

                <div class="row" style="margin:0px;">
                    <div class="card col-md-12">
                        <div class="card-body">
                            <ul class="nav nav-tabs nav-justified" id="myTab2" role="tablist"
                                style="border-bottom: 1px solid #ebe9f1; border-radius: 0px;">
                                <li class="nav-item">
                                    <a class="nav-link" id="home-tab-justified" data-toggle="tab"
                                        href="#home-just" role="tab" aria-controls="home-just"
                                        aria-selected="true">Add/Edit Department</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab-justified" data-toggle="tab"
                                        href="#profile-just" role="tab" aria-controls="profile-just"
                                        aria-selected="true">Add/Edit Branch</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="profile-tab-justified" data-toggle="tab"
                                        href="#messages-just" role="tab" aria-controls="messages-just"
                                        aria-selected="true">Add/Edit Category</a>
                                </li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content pt-1">
                                <div class="tab-pane" id="home-just" role="tabpanel"
                                    aria-labelledby="home-tab-justified">
                                    <div class="card" style="border: 0px;">
                                        <div class="card-header " style="padding-top:0px;">
                                            <h4 class="card-title" style="">Department List</h4>
                                            <div class="btn-group btn-align-right "><a
                                                    class="dt-button create-new btn btn-primary"
                                                    href="{{ route('create-department') }}"><span><svg
                                                            xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-plus mr-50 font-small-4">
                                                            <line x1="12" y1="5" x2="12"
                                                                y2="19"></line>
                                                            <line x1="5" y1="12" x2="19"
                                                                y2="12"></line>
                                                        </svg>Add New Department</span></a></div>
                                        </div>
                                        <div class="card-body" style="padding:0px; ">
                                            <div class="col-md-12">
                                                <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                                    <table class="table table-striped  my-leave-summary-entitle"
                                                        id="example11" style="font-size:12px;">
                                                        <thead>
                                                            <tr>
                                                                <th width="20%" style="text-transform: capitalize;">
                                                                    Department</th>
                                                                <th width="20%" style="text-transform: capitalize;">
                                                                    Description</th>
                                                                <th width="20%"
                                                                    style="text-transform: capitalize;text-align:left;">
                                                                    Email</th>
                                                                <th width="20%"
                                                                    style="text-align:center;text-transform: capitalize;">
                                                                    Forecast</th>
                                                                <th width="20%"
                                                                    style="text-align:center;text-transform: capitalize;white-space: nowrap;">
                                                                    Action</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="profile-just" role="tabpanel"
                                    aria-labelledby="profile-tab-justified">

                                    <div class="card" style="border: 0px;">
                                        <div class="card-header " style="padding-top:0px;">
                                            <h4 class="card-title" style="">Branch List</h4>
                                            <div class="btn-group btn-align-right "><a
                                                    class="dt-button create-new btn btn-primary"
                                                    href="{{ route('create-branch') }}"><span><svg
                                                            xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-plus mr-50 font-small-4">
                                                            <line x1="12" y1="5" x2="12"
                                                                y2="19"></line>
                                                            <line x1="5" y1="12" x2="19"
                                                                y2="12"></line>
                                                        </svg>Add New Branch</span></a></div>
                                        </div>
                                        <div class="card-body" style="padding:0px; ">
                                            <div class="col-md-12">
                                                <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                                    <table class="table table-striped  my-leave-summary-entitle"
                                                        id="example13" style="font-size:12px;">
                                                        <thead>
                                                            <tr>
                                                                <th width="18%"
                                                                    style="text-transform: capitalize;">Branch</th>
                                                                <th width="18%"
                                                                    style="text-transform: capitalize;">Description
                                                                </th>

                                                                <th width="18%"
                                                                    style="text-transform: capitalize;">State</th>
                                                                <th width="18%"
                                                                    style="text-transform: capitalize;text-align:left;">
                                                                    Email</th>
                                                                <th width="18%"
                                                                    style="text-align:center; text-transform: capitalize;">
                                                                    Forecast</th>
                                                                <th width="10%"
                                                                    style="text-align:center;text-transform: capitalize;white-space: nowrap;">
                                                                    Action</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane" id="messages-just" role="tabpanel"
                                    aria-labelledby="messages-tab-justified">
                                    <div class="card" style="border: 0px;">
                                        <div class="card-header " style="padding-top:0px;">
                                            <h4 class="card-title" style="">Category List</h4>
                                            <div class="btn-group btn-align-right "><a
                                                    class="dt-button create-new btn btn-primary"
                                                    href="{{ route('create-category') }}"><span><svg
                                                            xmlns="http://www.w3.org/2000/svg" width="24"
                                                            height="24" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2"
                                                            stroke-linecap="round" stroke-linejoin="round"
                                                            class="feather feather-plus mr-50 font-small-4">
                                                            <line x1="12" y1="5" x2="12"
                                                                y2="19"></line>
                                                            <line x1="5" y1="12" x2="19"
                                                                y2="12"></line>
                                                        </svg>Add New Category</span></a></div>
                                        </div>
                                        <div class="card-body" style="padding:0px; ">
                                            <div class="col-md-12">
                                                <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                                    <table class="table table-striped  my-leave-summary-entitle"
                                                        id="example12" style="font-size:12px;">
                                                        <thead>
                                                            <tr>
                                                                <th width="20%"
                                                                    style="text-transform: capitalize;">Category</th>
                                                                <th width="20%"
                                                                    style="text-transform: capitalize;">Description
                                                                </th>
                                                                <th width="20%"
                                                                    style="text-transform: capitalize;text-align:left;">
                                                                    Email</th>
                                                                <th width="20%"
                                                                    style="text-align:center;text-transform: capitalize;">
                                                                    Forecast</th>
                                                                <th width="20%"
                                                                    style="text-align:center;text-transform: capitalize;white-space: nowrap;">
                                                                    Action</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this Department ?
                            </h5>
                            <div id="delete-modal">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this Category ?</h5>
                            <div id="delete-modal1">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn1">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog"
                aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this Branch ?</h5>
                            <div id="delete-modal2">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn2">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<!-- END: Content-->
{{ View::make('layout.footer') }}
@include('inc.dept-model')
@include('inc.cat-model')
@include('inc.branch-model')
<script>
    $(document).ready(function() {

    var urlParams = new URLSearchParams(window.location.search);
    var activeTab = urlParams.get("tab") || "home-just"; // Default tab

    // Update URL without adding history entries (initial load)
    var newUrl = new URL(window.location);
    newUrl.searchParams.set("tab", activeTab);
    history.replaceState({ tab: activeTab }, '', newUrl);

    // Activate the correct tab
    $('.nav-link[href="#' + activeTab + '"]').tab('show');

    // Track the last selected tab to prevent unnecessary history entries
    let lastTab = activeTab;

    // Update URL when clicking tabs
    $('.nav-link').on('click', function (e) {
        var tabId = $(this).attr("href").substring(1);

        if (tabId !== lastTab) {
            lastTab = tabId; // Update last tab
            var newUrl = new URL(window.location);
            newUrl.searchParams.set("tab", tabId);
            history.replaceState({ tab: tabId }, '', newUrl); // Always replace state
        }
    });

    // Handle browser back/forward navigation
    window.onpopstate = function (event) {
        var tabId = new URLSearchParams(window.location.search).get("tab") || "home-just";
        $('.nav-link[href="#' + tabId + '"]').tab('show');
    };

        getdeptdata();
        getcategorydata();
        getbranchdata();
    });

    function getdeptdata() {
        $('#example11').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": "{!! route('getdeptdata') !!}",

            "columns": [

                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'email',
                    name: 'email',
                    "render": function(data, type, row) {
                    return (data === null || data === "null") ? "" : data;
                }
                },
                {
                    data: 'forecast',
                    name: 'forecast'
                },
                {
                    data: 'id',
                    name: 'id',
                    "render": function(data, type, row, meta) {
                        var edit =
                            '<a class="appDialog-model text-success" data-toggle="modal" data-target="#inlineForm11" data-id="' +
                            row.id +
                            '" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
                                                return edit;
                    }
                },

            ],
            'rowCallback': function(row, data, index) {
                // $(row).find('td:eq(2)').css('text-align', 'center');
                $(row).find('td:eq(3)').css('text-align', 'center');
                $(row).find('td:eq(0)').css('word-break', 'all');
                $(row).find('td:eq(1)').css('word-break', 'all');

            },
            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
        });
    }

    function getcategorydata() {
        $('#example12').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": "{!! route('getcategorydata') !!}",

            "columns": [

                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'description',
                    name: 'description'
                },
                {
                    data: 'email',
                    name: 'email',
                    "render": function(data, type, row) {
                    return (data === null || data === "null") ? "" : data;
                }
                },
                {
                    data: 'forecast',
                    name: 'forecast'
                },
                {
                    data: 'id',
                    name: 'id',
                    "render": function(data, type, row, meta) {
                        var edit =
                            '<a class="appDialog-model1 text-success" data-toggle="modal" data-target="#inlineForm12" data-id="' +
                            row.id +
                            '" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
                                                return edit;
                    }
                },

            ],
            'rowCallback': function(row, data, index) {
                // $(row).find('td:eq(2)').css('text-align', 'center');
                $(row).find('td:eq(3)').css('text-align', 'center');
                $(row).find('td:eq(0)').css('word-break', 'all');
                $(row).find('td:eq(1)').css('word-break', 'all');

            },
            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
        });
    }

    function getbranchdata() {
        $('#example13').DataTable({
            "lengthMenu": [
                [20, 50, 100, -1],
                [20, 50, 100, "All"]
            ],
            "order": [],
            "processing": true,
            "destroy": true,
            "serverSide": true,
            "ajax": "{!! route('getbranchdata') !!}",

            "columns": [

                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'description',
                    name: 'description'
                },

                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'email',
                    name: 'email',
                    "render": function(data, type, row) {
                    return (data === null || data === "null") ? "" : data;
                }
                },
                {
                    data: 'forecast',
                    name: 'forecast'
                },
                {
                    data: 'id',
                    name: 'id',
                    "render": function(data, type, row, meta) {
                        var edit =
                            '<a class="appDialog-model2 text-success" data-toggle="modal" data-target="#inlineForm13" data-id="' +
                            row.id +
                            '" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
                                                return edit;
                    }
                },

            ],
            'rowCallback': function(row, data, index) {
                $(row).find('td:eq(4)').css('text-align', 'center');
                // $(row).find('td:eq(3)').css('text-align', 'center');
                $(row).find('td:eq(0)').css('word-break', 'all');
                $(row).find('td:eq(1)').css('word-break', 'all');

            },
            "language": {
                "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                }
            },
        });
    }


    function updatedepartment() {
        $.ajax({
            type: 'get',
            data: {
                // _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/hr/setup/edit-department.blade.php:669
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/hr/setup/edit-department.blade.php</b> on line <b>669</b><br />