@extends('staff.layout')


@section('content')
 <div class="d-flex align-items-center justify-content-between mb-4">

        <div class="d-flex align-items-center gap-2">

          

            <div>
                <h5>Main Dashboard</h5>
            </div>

        </div>
        <div>
{{-- =========================
     ATTENDANCE ACTION BUTTONS
========================== --}}

<div class="d-flex flex-wrap gap-2">

    {{-- CHECK IN --}}
    <button type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#checkInModal">

        <i class="ti ti-login-2 me-1"></i>
        Check-in

    </button>


    {{-- BREAK --}}
    <button type="button"
            class="btn btn-primary"
            id="breakButton"
            data-bs-toggle="modal"
            data-bs-target="#breakModal">

        <i class="ti ti-coffee me-1"></i>
        <span id="breakButtonText">Break</span>

    </button>


    {{-- CHECK OUT --}}
    <button type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#checkOutModal">

        <i class="ti ti-logout-2 me-1"></i>
        Check-out

    </button>

</div>


{{-- =========================
     BREAK TIMER
========================== --}}

<div id="breakTimerWrapper"
     class="mt-2 d-none">

    <small style="color: var(--ink-dim);">
        Break Time
    </small>

    <div id="breakTimer"
         class="fw-semibold"
         style="color: var(--gold-soft);">
        00:00:00
    </div>

</div>



        </div>

    </div>
<div class="row g-3">

    {{-- GA Management --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <i class="ti ti-users fs-4 text-warning"></i>
                    <h6 class="mb-0 fw-semibold">GA Management</h6>
                </div>

                <a href="{{ route('staff_dashboard') }}"
                   class="text-warning text-decoration-none small fw-semibold">
                    View <i class="ti ti-arrow-up-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>

    {{-- GT Management --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <i class="ti ti-transfer fs-4 text-warning"></i>
                    <h6 class="mb-0 fw-semibold">GT Management</h6>
                </div>

                <a href="#"
                   class="text-warning text-decoration-none small fw-semibold">
                    View <i class="ti ti-arrow-up-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>

    {{-- GP Management --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <i class="ti ti-shopping-cart fs-4 text-warning"></i>
                    <h6 class="mb-0 fw-semibold">GP Management</h6>
                </div>

                <a href="#"
                   class="text-warning text-decoration-none small fw-semibold">
                    View <i class="ti ti-arrow-up-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>

    {{-- GS Management --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <i class="ti ti-building-bank fs-4 text-warning"></i>
                    <h6 class="mb-0 fw-semibold">GS Management</h6>
                </div>

                <a href="#"
                   class="text-warning text-decoration-none small fw-semibold">
                    View <i class="ti ti-arrow-up-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>

    {{-- Master Management --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="card h-100">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-3">
                    <i class="ti ti-settings fs-4 text-warning"></i>
                    <h6 class="mb-0 fw-semibold">Master Management</h6>
                </div>

                <a href="{{ route('gold_management') }}"
                   class="text-warning text-decoration-none small fw-semibold">
                    View <i class="ti ti-arrow-up-right ms-1"></i>
                </a>
            </div>
        </div>
    </div>

</div>
@endsection