@extends('layouts.adminapp')
@section('content')
    <div class="main-container container">
        <div class="row mb-3">
            <div class="col align-self-center">
                <h6 class="title">Manage Employees</h6>
            </div>

            <div class="col-auto">

                <a href="{{ route('employees.eexport') }}" class="btn btn-44 btn-light shadow-sm " style="margin-right: 5px;display: inline-block;">
                    <i class="nav-icon bi bi-download"></i>
                </a>
                <button data-href="{{ action('App\Http\Controllers\admin\EmployeeController@importView') }}"
                    class="btn btn-44 btn-light shadow-sm company-modal" data-bs-toggle="modal" data-bs-target="#exampleModal"
                    data-container=".brands_modal" style="margin-right: 5px;display: inline-block;">
                    <i class="nav-icon bi bi-upload"></i>
                </button>

                <button data-href="{{ action('App\Http\Controllers\admin\EmployeeController@create') }}"
                    class="btn btn-44 btn-light shadow-sm company-modal" data-bs-toggle="modal"
                    data-bs-target="#exampleModal" data-container=".brands_modal" style="display: inline-block;">
                    <i class="nav-icon bi bi-plus"></i>
                </button>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col-12 px-0 mb-3">
                <table id="table" class="table table-border " style="width: 100%;">
                    <thead class="thead-light">
                        <tr>
                            <th>Id</th>
                            <th>Photo</th>
                            <th>Name</th>
                            <th>Empid</th>
                            <th>Position Name</th>
                            <th>Position Code</th>
                            <th>Hq Name</th>
                            <th>Photo Status</th>
                            <th class="">Actions</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal fade" id="employeeModal" tabindex="-1" aria-labelledby="employeeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="employeeModalLabel">Employee Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="employee-photo" src="" alt="Employee Photo" class="img-fluid mb-3"
                        style="width: 100px; height: 100px;">
                    <h5 id="employeeName" class="mt-3"></h5>

                    <p><strong>Status:</strong> <span id="employee-status"></span></p>

                </div>
                <div class="modal-footer">
                    <form id="updateStatusForm" method="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="employeeId" id="hiddenEmployeeId">

                        <button type="button" class="btn btn-success text-white mt-2 update-status-btn"
                            data-status="Approved">Approve</button>
                        <button type="button" class="btn btn-danger text-white mt-2 update-status-btn"
                            data-status="Rejected">Reject</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap CSS -->
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> --}}

    <!-- Bootstrap JS (Ensure it is included before the closing </body> tag) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>


    <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>

    <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')
                }
            });

            var brands_table = $('#table').DataTable({
                destroy: true,
                processing: true,
                serverSide: true,
                ajax: "{{ url('/admin/employees') }}",

                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: function(data) {
                            var photoPath = data.photo ? 'uploads/photo/' + data.photo :
                                'uploads/photo/default.png';
                            return '<img style="width: 50px;" src="{{ asset('') }}' +
                                photoPath + '" />';
                        },
                        name: 'photo'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'hq',
                        name: 'hq'
                    },
                    {
                        data: 'p_code',
                        name: 'p_code'
                    },
                    {
                        data: 'hq_name',
                        name: 'hq_name'
                    },
                    {
                        data: function(data) {
                            if (data.photo_status === "Approved") {
                                return '<span class="badge bg-success text-white">Approved</span>';
                            } else if (data.photo_status === "Rejected") {
                                return '<span class="badge bg-danger">Rejected</span>';
                            } else {
                                return '<span class="badge bg-warning">Pending</span>';
                            }
                        },
                        name: 'photo_status'
                    },

                    {
                        data: 'action',
                        name: 'action'
                    }
                ],
                order: [
                    [0, 'DESC']
                ]
            });
            // console.log(brands_table);

            $(document).on('click', '.company-modal', function(e) {
                var container = $(this).data("container");
                $.ajax({

                    url: $(this).data("href"),
                    dataType: "html",
                    success: function(result) {
                        $(container).html(result).modal('show');
                    }
                });
            });

            //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({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: '#088f7d'
                            }).showToast();

                            //  $.notify({message: result.msg},{type: 'success'});
                            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: result.msg,
                            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).on('submit', '#edit_form', function(e) {
                e.preventDefault();
                var data = new FormData($('#edit_form')[0]);
                //if(photo.files[0]){
                //    data.append('photo', photo.files[0]);
                // }
                data.append('_token', '{{ csrf_token() }}');
                $.ajax({
                    method: "POST",
                    url: $(this).attr("action"),
                    dataType: "json",
                    data: data,
                    processData: false,
                    contentType: false,
                    success: function(result) {
                        if (result.success == true) {
                            $('div.brands_modal').modal('hide');
                            Toastify({
                                text: result.msg,
                                duration: 3000,
                                backgroundColor: '#088f7d'
                            }).showToast();
                            // $.notify({message: result.msg},{type: 'success'});
                            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();

                        }
                    }
                });
            });
        });
        $(document).ready(function() {
            $(document).on("click", ".show-employee", function() {
                var employeeId = $(this).data("id");
                var employeeName = $(this).data("name");
              
                var employeePhoto = $(this).data("photo");
                var employeeStatus = $(this).data("photo_status");

                // Set modal values
                $("#employeePhoto").attr("src", employeePhoto && employeePhoto !== 'null' ? employeePhoto :
                    "/default.jpg");
                $("#employeeName").text(employeeName);
              
                $("#employeeStatus").text(employeeStatus);
                $("#hiddenEmployeeId").val(employeeId);

                // Show modal
                $("#employeeModal").modal("show");
            });

            // Handle status update button click
            $(document).on("click", ".update-status-btn", function() {
                var employeeId = $("#hiddenEmployeeId").val();
                var newStatus = $(this).data("photo_status");

                $.ajax({
                    url: "/update-employee-status",
                    type: "POST",
                    data: {
                        _token: $("input[name=_token]").val(),
                        employeeId: employeeId,
                        status: newStatus
                    },
                    success: function(response) {
                        if (response.success) {
                            // If status is Rejected, remove the photo
                            if (newStatus === "Rejected") {
                                $("#employeePhoto").attr("src", "/default.jpg");
                            }
                            location.reload(); // Reload the page after update
                        } else {
                            alert("Failed to update photo status.");
                        }
                    },
                    error: function() {
                        alert("An error occurred. Please try again.");
                    }
                });
            });
        });
    </script>
@endsection