@extends('employee.layouts')

@section('title', 'Dashboard')

@section('header')

    <!-- Toastr CSS -->

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">

@endsection

<style>

    .recent-style-card {

        position: relative;

        border-radius: 14px;

        background: #ffffff;

        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

        overflow: hidden;

        height: 120px !important;

        margin: 0px !important;

    }



    .recent-style-left {

        position: absolute;

        left: 0;

        top: 0;

        width: 6px;

        height: 100%;

        background: #138FA6 !important;

    }



    .recent-style-body {

        padding: 18px 20px;

    }



    .recent-style-title {

        font-size: 16px;

        font-weight: 600;

        color: #138FA6 !important;

    }



    .recent-style-count {

        font-size: 34px;

        font-weight: 700;

        color: #222;

    }



    .recent-style-icon {

        width: 42px;

        height: 42px;

        background: #eafaf1;

        border-radius: 10px;

        display: flex;

        align-items: center;

        justify-content: center;

    }



    .recent-style-icon img {

        width: 22px;

    }



    .recent-style-view {

        position: absolute;

        bottom: 14px;

        right: 18px;

        font-size: 14px;

        font-weight: bold !important;

        color: #1aa3b8;

        text-decoration: underline !important;

        text-underline-offset: 2px;

    }



    .branch-top-card {

        position: relative;

        border-radius: 14px;

        background: #ffffff;

        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

        overflow: hidden;

        padding: 20px;

        height: auto !important;

        min-height: 190px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

    }



    /* Left border strip like below cards */

    .branch-top-card::before {

        content: "";

        position: absolute;

        left: 0;

        top: 0;

        width: 6px;

        height: 100%;

        background: #138FA6;

        /* same color */

    }



    .branch-img {

        height: 100px !important;

        width: 100px !important;

        border-radius: 10px;

    }



    .employee-details {

        width: 100%;

        max-width: 360px;

        /* keeps it centered nicely */

        margin: 0 auto;

    }



    .detail-row {

        display: grid;

        grid-template-columns: 140px 20px 1fr;

        align-items: center;

        gap: 8px;

        margin-bottom: 12px;

    }



    .detail-label {

        font-weight: 600;

        text-align: left;

        white-space: nowrap;

    }



    .detail-colon {

        font-weight: 700;

        text-align: center;

    }



    .detail-value {

        text-align: left;

        font-weight: 500;

        word-break: break-word;

    }



    .branch-title {

        width: 100%;

        text-align: left;

    }



    /* Small screens */

    @media (max-width: 576px) {

        .branch-title {

            justify-content: center !important;

            text-align: center;

            gap: 6px;

        }



        .branch-label,

        .branch-value {

            width: 100%;

            text-align: center;

            white-space: normal !important;

        }

    }

</style>

@section('content')

    <div class="container-fluid page-wrapper dashboard-section m-0">

        <div class="row g-0">

            <div class="mb-4">

                <h3 class="page-top-heading">Dashboard</h3>

            </div>

        </div>

        @php

            $employee = auth('employee')->user();



            $branch = null;

            if ($employee && $employee->auth_branch_id) {

                $branch = \App\Models\User::find($employee->auth_branch_id);

            }

        @endphp



        <div class="row g-4 mb-4">



            {{-- Branch Details --}}

            <div class="col-lg-6">

                <div class="branch-top-card">



                    <div class="d-flex justify-content-between align-items-center branch-title flex-wrap">

                        <h5 class="mb-0 fw-bold text-nowrap branch-label">{{ $branch->name ?? '-' }}</h5>

                        <h6 class="mb-0 fw-bold me-2 branch-value" style="color:#a19a9a;">

                            {{ $branch->building_name ?? 'Address not available' }}

                        </h6>

                    </div>



                    {{-- Branch Logo --}}

                    <div class="text-center my-3">

                        <img src="{{ $branch && $branch->logo ? asset($branch->logo) : asset('assets/images/avatar/avatar.svg') }}"

                            class="avatar img-fluid rounded" alt="Branch Logo"

                            style="width:150px; height:150px; object-fit:cover;">

                    </div>







                </div>

            </div>



            {{-- Employee Details --}}

            <div class="col-lg-6">

                <div class="branch-top-card h-100">

                    <h5 class="mb-4 fw-bold text-center">Employee Details</h5>



                    <div class="employee-details">



                        <div class="detail-row">

                            <div class="detail-label">Staff Name</div>

                            <div class="detail-colon">:</div>

                            <div class="detail-value">

                                {{ $employee->name ?? '-' }}

                            </div>

                        </div>



                        <div class="detail-row">

                            <div class="detail-label">Email</div>

                            <div class="detail-colon">:</div>

                            <div class="detail-value">

                                {{ $employee->email ?? '-' }}

                            </div>

                        </div>



                        <div class="detail-row">

                            <div class="detail-label">Designation</div>

                            <div class="detail-colon">:</div>

                            <div class="detail-value">

                                {{ ucfirst($employee->designation ?? '-') }}

                            </div>

                        </div>



                    </div>

                </div>

            </div>



        </div>



        <div class="row g-4">

            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 col-lg-custom mb-2">

                <div class="card recent-style-card border-0">

                    <div class="recent-style-left"></div>

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

                        <div class="d-flex justify-content-between align-items-center">

                            <div>

                                <p class="mb-1 recent-style-title">Total Product</p>

                                <h2 class="mb-0 recent-style-count">{{$productCount}}</h2>

                            </div>

                            <div class="recent-style-icon">

                                <span class="material-symbols-outlined">

                                    receipt_long

                                </span>

                            </div>

                        </div>

                        <a href="{{ route('employee.product') }}" class="text-decoration-none"> <span

                                class="recent-style-view">View</span></a>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 col-lg-custom mb-2">

                <div class="card recent-style-card border-0">

                    <div class="recent-style-left"></div>

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

                        <div class="d-flex justify-content-between align-items-center">

                            <div>

                                <p class="mb-1 recent-style-title">Today Bills</p>

                                <h2 class="mb-0 recent-style-count">{{ $billCount }}</h2>

                            </div>

                            <div class="recent-style-icon">

                                <span class="material-symbols-outlined">

                                    receipt_long

                                </span>

                            </div>

                        </div>

                        <a href="{{ route('employee.offline_sales_history') }}" class="text-decoration-none"> <span

                                class="recent-style-view">View</span></a>

                    </div>

                </div>

            </div>

            <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 col-lg-custom mb-2">

                <div class="card recent-style-card border-0">

                    <div class="recent-style-left"></div>

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

                        <div class="d-flex justify-content-between align-items-center">

                            <div>

                                <p class="mb-1 recent-style-title">My Bills</p>

                                <h2 class="mb-0 recent-style-count">{{ $mybill }}</h2>

                            </div>

                            <div class="recent-style-icon">

                                <span class="material-symbols-outlined">

                                    order_approve </span>

                            </div>

                        </div>

                        <a href="{{ route('employee.offline_sales_history') }}" class="text-decoration-none"> <span

                                class="recent-style-view">View</span></a>

                    </div>

                </div>

            </div>

        </div>

    </div>

@endsection

@section('footer')

    <!-- JQuery CDN -->

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Toastr JS -->

    <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

    <!-- Display toast based on session message -->

    <script>

        $(document).ready(function() {

            @if (session('success'))

                toastr.success(

                    '{{ session('

                                                                                                    success ') }}'

                    );

            @endif

        });

    </script>

@endsection