@extends('Admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        /* Custom styles to match the image UI */
        .card {
            border-radius: 8px;
            border: 1px solid #e6e6e6;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }

        /* Table Header Styling */
        #usersTable thead th {
            background-color: #fcfcfd;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.5px;
            color: #717171;
            border-bottom: 1px solid #f0f0f0;
            padding: 12px 15px;
        }

        #usersTable tbody td {
            padding: 15px;
            vertical-align: middle;
            color: #4b4b4b;
            font-size: 14px;
        }

        /* Status Badge Styling */
        .badge-completed {
            background-color: #E8FADF;
            color: #44C13C;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 13px;
        }

        .badge-pending {
            background-color: #FFE5E5;
            color: #FF5B5C;
            padding: 6px 12px;
            border-radius: 6px;
            font-weight: 500;
            font-size: 13px;
        }

        /* Action Icons */
        .btn-download {
            color: #5D87FF;
            transition: 0.2s;
            cursor: pointer;
        }

        .btn-download:hover {
            color: #3b66ff;
        }

        /* Layout Adjustments */
        .search-input {
            border-radius: 6px;
            border: 1px solid #dbdbdb;
        }

        .export-btn {
            background-color: #ebebed;
            color: #5d5d5d;
            border: none;
            font-weight: 500;
        }
    </style>

    <div class="container-fluid p-4">
        <div class="row align-items-center justify-content-between mb-4">
            <div class="col-auto">
                <h6 class="d-flex align-items-center">
                    <a href="{{ route('edit_staff', $staff->id) }}" class="btn btn-white btn-icon me-3"
                        style="box-shadow: 0px 4px 10px rgba(0,0,0,0.08);">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M15 18l-6-6 6-6" />
                        </svg>
                    </a>STAFF SALARY HISTORY

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

        <div class="card">
            <div class="card-body">

                <div class="table-responsive">
                    <table class="table table-bordered" id="salaryHistoryTable">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Salary</th>
                                <th>Month</th>

                                <th>Updated Date</th>
                            </tr>
                        </thead>
                    </table>
                </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>
        $(document).ready(function () {

            let ajaxUrl = "{{ route('view_staff_salary_history_data', $staff->user_id) }}";

            $('#salaryHistoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: ajaxUrl,
                columns: [
                    {
                        data: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'salary'
                    },
                    {
                        data: 'date',
                        render: function (data) {
                            if (!data) return '-';
                            let d = new Date(data);
                            if (isNaN(d)) return '-';
                            return d.toLocaleString('en-US', { month: 'long', year: 'numeric' });
                        }
                    },
                    {
                        data: 'created_at',
                        render: function (data) {
                            if (!data) return '-';
                            let d = new Date(data);
                            if (isNaN(d)) return '-';
                            return d.toLocaleDateString('en-US');
                        }
                    }
                ]
            });

        });
    </script>


@endsection