@extends('backend.app')

@section('content')
    <div class="main-breadcrumb d-flex align-items-center my-3 position-relative">
        <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-14">Manage Employee</h2>
        <div class="flex-shrink-0">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-end mb-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Manage Employee</li>
                </ol>
            </nav>
        </div>
    </div>
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4>Manage Employee</h4>
            <div class="d-flex flex-wrap gap-3 ms-auto">
                {{-- Search Box --}}
                <div class="form-icon">
                    <input type="text" class="form-control form-control-icon" id="searchBox"
                        placeholder="Search Here ...">
                    <i class="ri-search-2-line text-muted"></i>
                </div>

                {{-- Filter by Status --}}
                <div class="dropdown">
                    <button class="btn btn-outline-light text-muted dropdown-toggle" type="button" id="filterByDropdown"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Filter By
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="filterByDropdown">
                        <li><a class="dropdown-item status-filter" data-status="">All</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Active">Active</a></li>
                        <li><a class="dropdown-item status-filter" data-status="Inactive">Inactive</a></li>
                    </ul>
                </div>

                {{-- Add New Button --}}
                <a href="{{ route('admin.employees.create') }}" class="btn btn-primary">
                    <i class="bi bi-plus-lg me-1"></i> Add New
                </a>
                <button class="btn btn-44 btn-light shadow-sm" data-bs-toggle="modal" data-bs-target="#importModal"
                    style="margin-right: 5px; display: inline-block;">
                    <i class="nav-icon bi bi-upload"></i>
                </button>

            </div>
        </div>
        <div class="card-body">
            @if (session('success'))
                <div class="alert alert-subtle-success  alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-subtle-danger alert-dismissible fade show" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <div class="table-box table-responsive">
                <table class="table table-hover text-nowrap" id="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Empid</th>
                            <th>Name</th>
                            <th>Hq</th>
                            <th>Region</th>
							<th>Type</th>
                            <th>Chairid</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <div class="modal custom-modal fade brands_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">

    </div>
    <!-- Static Modal -->
    <div class="modal fade brands_modal" id="importModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static"
        data-bs-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Import Employees</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form id="company_add_form" action="{{ route('import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="importFile" class="form-label">Upload File</label>
                            <input type="file" name="file" class="form-control" id="importFile" required>
                            <small id="file_error" class="text-danger"></small>
                        </div>
                        <button type="submit" class="btn btn-success">Upload</button>
                    </form>
                </div>

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


    <div id="edit_category" class="modal custom-modal fade" role="dialog">

    </div>
@endsection

@section('footer')
    <script>
        $(document).ready(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name=csrf-token]').attr('content')
                }
            });
            let statusFilter = '';
            var table = $('#table').DataTable({
               processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.employees.index') }}",
                    data: function(d) {
                        d.status = statusFilter; // Send status filter to server
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
{
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'hq',
                        name: 'hq'
                    },
                    {
                        data: 'region',
                        name: 'region'
                    },
                    {
                        data: 'type',
                        name: 'type'
                    },

                    {
                        data: 'chairid',
                        name: 'chairid'
                    }

                    ,{
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: true
                    },
                    {
                        data: 'action',
                        name: 'action'
                    }
                ],
                order: [
                    [0, 'DESC']
                ]
            });
            // console.log(brands_table);
// 🔍 Search in DataTable
            $('#searchBox').on('keyup', function() {
                table.search(this.value).draw();
            });

            // 📌 Filter by Status
            $('.status-filter').on('click', function() {
                statusFilter = $(this).data('status');
                table.ajax.reload();
            });

            //Submit Category

            $(document).on('submit', 'form#company_add_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#company_add_form')[0]);

                data.append('_token', '{{ csrf_token() }}');
                $.ajax({
                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    contentType: false,
                    processData: false,
                    success: function(result) {
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');

                            // ✅ Toastify works now
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                gravity: "top", // top or bottom
                                position: "right", // left, center, right
                                backgroundColor: "#088f7d"
                            }).showToast();

                            brands_table.ajax.reload();
                        } else {
                            $.each(result.data, function(key, val) {
                                $("#" + key + "_error").text(val[0]);
                            })

                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: "red"
                            }).showToast();
                        }
                    },
                    error: function(xhr, status, error) {
                        Toastify({
                            text: "Something went wrong!",
                            duration: 3000,
                            backgroundColor: "red"
                        }).showToast();
                    }
                });
            });


            $(document).on('click', 'button.edit_form', function() {
                var container = $(this).data("container");
                $.ajax({
                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).modal('show');
                    }
                });
            });


            document.addEventListener("DOMContentLoaded", function() {
                let chartElement = document.querySelector("#myChart");
                if (chartElement) {
                    var chart = new ApexCharts(chartElement, chartOptions);
                    chart.render();
                }
            });

            

        });
    </script>
@endsection