@extends('Branch.layout')

@section('content')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    :root[data-bs-theme="light"] {
        --bg: #f7f5f0;
        --bg-elevated: #ffffff;
        --bg-inset: #f0ede5;
        --ink: #1c1a16;
        --ink-soft: #6b6558;
        --hairline: #e3ddd0;
        --gold: #c9a227;
        --gold-bright: #ffcc00;
        --gold-wash: rgba(255, 204, 0, 0.10);
        --shadow: 0 1px 2px rgba(28,26,22,0.04), 0 8px 24px rgba(28,26,22,0.06);
        --table-row-hover: #fbf8f0;
    }

    :root[data-bs-theme="dark"] {
        --bg: #14130f;
        --bg-elevated: #1c1a15;
        --bg-inset: #221f19;
        --ink: #f3efe4;
        --ink-soft: #a49c8a;
        --hairline: #322e24;
        --gold: #ffcc00;
        --gold-bright: #ffd93d;
        --gold-wash: rgba(255, 204, 0, 0.08);
        --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 32px rgba(0,0,0,0.35);
        --table-row-hover: #24211a;
    }

    #branch-page {
        /* background: var(--bg); */
        color: var(--ink);
        font-family: 'Manrope', sans-serif;
        min-height: 100%;
        /* padding: 2.5rem 0 4rem; */
        transition: background 0.35s ease, color 0.35s ease;
    }

    #branch-page .container-fluid { max-width: 1180px; }

    #branch-page .eyebrow {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--gold);
        font-weight: 700;
        margin-bottom: 0.35rem;
        display: block;
    }

    #branch-page h1.page-title {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600;
        font-size: 2.6rem;
        letter-spacing: 0.01em;
        color: var(--ink);
        margin-bottom: 0;
        line-height: 1.15;
    }

    #branch-page .theme-toggle {
        border: 1px solid var(--hairline);
        background: var(--bg-elevated);
        color: var(--ink);
        border-radius: 999px;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.25s ease;
        box-shadow: var(--shadow);
    }
    #branch-page .theme-toggle:hover {
        border-color: var(--gold);
        color: var(--gold);
        transform: translateY(-1px);
    }
    #branch-page .theme-toggle i { font-size: 1.05rem; }

    #branch-page .top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2.25rem;
    }

    /* Panels */
    #branch-page .panel {
        background: var(--bg-elevated);
        border: 1px solid var(--hairline);
        border-radius: 4px;
        box-shadow: var(--shadow);
        margin-bottom: 1.75rem;
        overflow: hidden;
        transition: background 0.35s ease, border-color 0.35s ease;
    }

    #branch-page .panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.35rem 1.75rem;
        border-bottom: 1px solid var(--hairline);
        background: linear-gradient(180deg, var(--gold-wash), transparent);
    }

    #branch-page .panel-head h5 {
        font-family: 'Cormorant Garamond', serif;
        font-weight: 600;
        font-size: 1.4rem;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        color: var(--ink);
    }

    #branch-page .panel-head h5 i {
        color: var(--gold);
        font-size: 1.15rem;
    }

    #branch-page .panel-body { padding: 1.75rem; }

    /* Branch detail cells */
    #branch-page .detail-cell {
        padding: 1.25rem 1.4rem;
        background: var(--bg-inset);
        border-radius: 3px;
        border-left: 2px solid var(--gold);
        height: 100%;
        transition: background 0.35s ease;
    }

    #branch-page .detail-cell small {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--ink-soft);
        display: block;
        margin-bottom: 0.4rem;
    }

    #branch-page .detail-cell .value {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.55rem;
        font-weight: 600;
        color: var(--ink);
    }

    /* Gold outline button */
    #branch-page .btn-gold-outline {
        border: 1px solid var(--gold);
        color: var(--gold);
        background: transparent;
        font-weight: 600;
        font-size: 0.85rem;
        letter-spacing: 0.02em;
        padding: 0.5rem 1.1rem;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.25s ease;
        text-decoration: none;
        white-space: nowrap;
    }
    #branch-page .btn-gold-outline:hover {
        background: var(--gold);
        color: #14130f;
        text-decoration: none;
    }

    /* Table */
    #branch-page .table-responsive { border-radius: 3px; }

    #branch-page table.dataTable {
        color: var(--ink);
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #branch-page table.dataTable thead th {
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        color: var(--ink-soft);
        background: var(--bg-inset);
        border-bottom: 1px solid var(--hairline) !important;
        padding: 0.9rem 1rem;
        white-space: nowrap;
    }

    #branch-page table.dataTable tbody td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--hairline);
        font-size: 0.92rem;
        vertical-align: middle;
    }

    #branch-page table.dataTable tbody tr {
        background: var(--bg-elevated);
        transition: background 0.2s ease;
    }

    #branch-page table.dataTable tbody tr:hover {
        background: var(--table-row-hover);
    }

    #branch-page table.dataTable tbody tr:last-child td { border-bottom: none; }

    /* DataTables control overrides for theming */
    #branch-page .dataTables_wrapper .dataTables_length,
    #branch-page .dataTables_wrapper .dataTables_filter,
    #branch-page .dataTables_wrapper .dataTables_info,
    #branch-page .dataTables_wrapper .dataTables_processing,
    #branch-page .dataTables_wrapper .dataTables_paginate {
        color: var(--ink-soft);
        font-size: 0.85rem;
    }

    #branch-page .dataTables_wrapper .dataTables_filter input,
    #branch-page .dataTables_wrapper .dataTables_length select {
        background: var(--bg-inset);
        border: 1px solid var(--hairline);
        color: var(--ink);
        border-radius: 3px;
        padding: 0.3rem 0.6rem;
    }

    #branch-page .dataTables_wrapper .dataTables_filter input:focus,
    #branch-page .dataTables_wrapper .dataTables_length select:focus {
        outline: none;
        border-color: var(--gold);
    }

    #branch-page .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: var(--ink) !important;
        border-radius: 3px !important;
        border: 1px solid transparent !important;
        background: transparent !important;
    }

    #branch-page .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: var(--gold) !important;
        color: #14130f !important;
        border-color: var(--gold) !important;
        font-weight: 700;
    }

    #branch-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: var(--gold-wash) !important;
        color: var(--gold) !important;
        border-color: var(--gold) !important;
    }

    @media (max-width: 767px) {
        #branch-page h1.page-title { font-size: 2rem; }
        #branch-page .top-bar { flex-wrap: wrap; gap: 1rem; }
    }
    .dt-length label
    {
        display: none;
    }
    .dt-search label
    {
        display: none;
    }
</style>

<div id="branch-page">
<div class="container-fluid">

    <div class="top-bar">
        <div>
            <span class="eyebrow">Branch Overview</span>
            <h1 class="page-title">{{ $branch->branch_name }}</h1>
        </div>
       
    </div>

    <!-- Branch Details -->
    <div class="panel">
        <div class="panel-head">
            <h5><i class="bi bi-building"></i> Branch Details</h5>
        </div>
        <div class="panel-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="detail-cell">
                        <small>Branch Name</small>
                        <div class="value">{{ $branch->branch_name }}</div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="detail-cell">
                        <small>Place</small>
                        <div class="value">{{ $branch->place }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Staff List -->
    <div class="panel">
        <div class="panel-head">
            <h5><i class="bi bi-people-fill"></i> Staff List</h5>
            <a href="{{ route('branch.branch_staff_attendance', $branch->id) }}" class="btn-gold-outline">
                <i class="bi bi-calendar-check"></i> View Staff Attendance
            </a>
        </div>

        <div class="panel-body">
            <div class="table-responsive">
                <table class="table" id="staffTable" style="width:100%">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Staff Id</th>
                            <th>Name</th>
                            <th>Phone Number</th>
                            <th>Designation</th>
                            <th>Per Day Salary</th>
                            <th>Attendance</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

</div>
</div>
<link rel="stylesheet"
    href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<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>
    console.log('BRANCH STAFF SCRIPT LOADED');

    $(document).ready(function () {

        console.log('DOCUMENT READY');

        const branchId = @json($branch->id ?? null);
        const ajaxUrl = @json(route('branch.branch_staff_data', $branch->id));

        console.log('Branch ID:', branchId);
        console.log('AJAX URL:', ajaxUrl);
        console.log('jQuery version:', $.fn.jquery);
        console.log('DataTable available:', typeof $.fn.DataTable);

        /*
        |--------------------------------------------------------------------------
        | DataTables alert popup disable
        |--------------------------------------------------------------------------
        */
        $.fn.dataTable.ext.errMode = 'none';

        /*
        |--------------------------------------------------------------------------
        | Test URL separately
        |--------------------------------------------------------------------------
        */
        $.ajax({
            url: ajaxUrl,
            type: 'GET',

            beforeSend: function () {
                console.log('TEST AJAX REQUEST STARTED');
            },

            success: function (response) {
                console.log('TEST AJAX SUCCESS:', response);
            },

            error: function (xhr, status, error) {
                console.error('TEST AJAX ERROR');
                console.error('HTTP STATUS:', xhr.status);
                console.error('AJAX STATUS:', status);
                console.error('ERROR:', error);
                console.error('CONTENT TYPE:', xhr.getResponseHeader('content-type'));
                console.error('RESPONSE TEXT:', xhr.responseText);
                console.error('RESPONSE JSON:', xhr.responseJSON);
            }
        });

        /*
        |--------------------------------------------------------------------------
        | Check table
        |--------------------------------------------------------------------------
        */
        if ($('#staffTable').length === 0) {
            console.error('#staffTable element not found.');
            return;
        }

        /*
        |--------------------------------------------------------------------------
        | Initialize DataTable
        |--------------------------------------------------------------------------
        */
        const staffTable = $('#staffTable').DataTable({
            processing: true,
            serverSide: true,
            destroy: true,

            ajax: {
                url: ajaxUrl,
                type: 'GET',
                dataType: 'json',

                beforeSend: function (xhr, settings) {
                    console.log('DATATABLE AJAX STARTED');
                    console.log('URL:', settings.url);
                },

                dataSrc: function (json) {
                    console.log('DATATABLE JSON RESPONSE:', json);

                    if (!json || !Array.isArray(json.data)) {
                        console.error('Invalid DataTables JSON structure:', json);
                        return [];
                    }

                    return json.data;
                },

                error: function (xhr, status, error) {
                    console.error('==============================');
                    console.error('DATATABLE AJAX ERROR');
                    console.error('HTTP STATUS:', xhr.status);
                    console.error('AJAX STATUS:', status);
                    console.error('ERROR:', error);
                    console.error(
                        'CONTENT TYPE:',
                        xhr.getResponseHeader('content-type')
                    );
                    console.error('RESPONSE TEXT:', xhr.responseText);
                    console.error('RESPONSE JSON:', xhr.responseJSON);
                    console.error('==============================');

                    let message = 'Unable to load staff data.';

                    if (xhr.status === 401) {
                        message = 'Branch login session expired.';
                    } else if (xhr.status === 404) {
                        message = 'Staff data route not found.';
                    } else if (xhr.status === 500) {
                        message = 'Server error. Check Laravel log.';
                    }

                    if (xhr.responseJSON?.message) {
                        message = xhr.responseJSON.message;
                    }

                    alert(message);
                }
            },

            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                    defaultContent: '-'
                },
                {
                    data: 'user_id',
                    name: 'user_id',
                    defaultContent: '-'
                },
                {
                    data: 'name',
                    name: 'name',
                    defaultContent: '-'
                },
                {
                    data: 'phone_number',
                    name: 'phone_number',
                    defaultContent: '-'
                },
                {
                    data: 'designation',
                    name: 'designation',
                    defaultContent: '-'
                },
                {
                    data: 'per_day_salary',
                    name: 'per_day_salary',
                    defaultContent: '-'
                },
                {
                    data: 'attendance',
                    name: 'attendance',
                    orderable: false,
                    searchable: false,
                    defaultContent: '-'
                }
            ]
        });

        $('#staffTable').on('error.dt', function (
            event,
            settings,
            techNote,
            message
        ) {
            console.error('DATATABLE INTERNAL ERROR');
            console.error('Technical note:', techNote);
            console.error('Message:', message);
        });

        console.log('DataTable initialized:', staffTable);
    });
</script>
@endsection