@extends('Admin.layout')

<style>
    .dt-length,
    .dt-search {
        display: none;
    }

    #historyTable {
        width: 100% !important;
    }

    #historyTable thead th {
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap;
    }

    #historyTable tbody td {
        text-align: center;
        vertical-align: middle !important;
    }

    .dataTables_wrapper .dataTables_paginate {
        padding: 15px;
    }

    .dataTables_wrapper .dataTables_info {
        padding: 20px 15px;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .card {
        border-radius: 12px;
    }
</style>
@section('content')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3 m-2">
        <h5 class="mb-0 d-flex align-items-center">
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                <a href="{{ route('edit_staff', $id) }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="icon icon-tabler">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>

            Staff Edit History
        </h5>
        {{-- <div class="col-auto">
            <a href="{{ route('add_branch') }}" class="btn btn-primary">Add Branch</a>
        </div> --}}
    </div>
    <div class="card p-0 m-2 border-0 shadow-sm">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-md-1">
                <label class="small text-muted d-block">Show</label>
                <select id="pageLength" class="form-select form-select-sm">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>
            {{-- <div class="col-md-3 ms-auto">
                <input type="text" id="customSearch" class="form-control form-control-sm" placeholder="Search">
            </div> --}}
        </div>
        <div class="table-responsive p-0">
            <table class="table table-hover mb-0" id="historyTable">
                <thead class="bg-light">
                    <tr>
                        <th class="text-uppercase small fw-bold">Sno</th>
                        <th class="text-uppercase small fw-bold ">Field</th>
                        <th class="text-uppercase small fw-bold ">Old Value</th>
                        <th class="text-uppercase small fw-bold">New Value</th>
                        <th class="text-uppercase small fw-bold">Updated At</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
        <div class="modal fade" id="delete" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Delete branch</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this branch?
                        <input type="hidden" id="delete_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-danger" id="confirmDelete">
                            Delete
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script>

        $(document).ready(function () {

            $('#historyTable').DataTable({

                processing: true,

                serverSide: true,

                ajax: "{{ route('staffEditHistoryData', $id) }}",

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        searchable: false,
                        orderable: false
                    },

                    {
                        data: 'field_name',
                        name: 'field_name'
                    },

                    {
                        data: 'old_value',
                        name: 'old_value'
                    },

                    {
                        data: 'new_value',
                        name: 'new_value'
                    },

                    {
                        data: 'created_at',
                        name: 'created_at'
                    }
                ]
            });

        });

    </script>
@endsection