@extends('admin.layouts.home.main')
@section('title')
    Invoices Page
@endsection

@section('nav')
    <div id="NavBar">
        <!-- ! header -->
        <header>
            <!-- ! NavBar -->
            <nav class="navbar navbar-expand-lg bg-body-tertiary py-4 fixed-top">
                <div class="container-fluid px-5">
                    <a class="navbar-brand" href="#">Ilogistics</a>
                    <button class="navbar-toggler borer border-0" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <!-- ! navOne -->
                    <div class="navOne d-flex justify-content-end w-100 d-none d-lg-flex">
                        <div class="search">
                            <i class="fa fa-magnifying-glass" style="color: #3090ff"></i>
                            <input type="text" id="inpSearch" placeholder="Search for..." />
                        </div>
                        <button id="testAdd" type="button" class="btn btn-primary">
                            <i class="fa-solid fa-plus" style="color: #ffffff"></i>
                            Add Invoices
                        </button>
                        <div class="notificationContainer">
                            <div class="notification">
                                <img src="{{ asset('images/notifications.svg') }}" alt="" />
                                <img src="{{ asset('images/notification-w.svg') }}" alt="" />
                                <span>8</span>
                            </div>
                        </div>
                        <div class="UserInfo">
                            <img src="{{ asset('images/user.png') }}" alt="User" />
                            <div class="info ms-1">
                                <p>Ahmad Sweid</p>
                                <span>Admin</span>
                            </div>
                        </div>
                    </div>
                    <!-- ! sideBar -->
                    <div class="offcanvas offcanvas-end px-3 d-lg-none" tabindex="-1" id="offcanvasRight"
                        aria-labelledby="offcanvasRightLabel">
                        <div class="offcanvas-header ps-0">
                            <h5 class="offcanvas-title" id="offcanvasRightLabel">
                                <a class="navbar-brand" href="#">Ilogistics</a>
                                <div class="notificationContainer">
                                    <div class="notification">
                                        <img src="{{ asset('images/notifications.svg') }}" alt="" />
                                        <img src="{{ asset('images/notification-w.svg') }}" alt="" />
                                        <span>8</span>
                                    </div>
                                </div>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                                aria-label="Close"></button>
                        </div>
                        <div class="search">
                            <i class="fa fa-magnifying-glass" style="color: #3090ff"></i>
                            <input type="text" id="inpSearch" placeholder="Search for..." />
                        </div>
                        <div class="general mt-4">
                            <h5>GENERAL</h5>
                            <div class="option">
                                <button type="button" class="btn w-100 text-start mt-1 p-2 active">
                                    <a href="{{ route('admin.dashboard') }}"><img src="{{ asset('images/home-g.svg') }}"
                                            alt="" />
                                        <img src="{{ asset('images/home-w.svg') }}" alt="" /> Home</a>
                                </button>
                                <button type="button" class="btn w-100 text-start mt-1 p-2">
                                    <a href="#"><img src="{{ asset('images/shipment-g.svg') }}" alt="" />
                                        <img src="{{ asset('') }}images/shipment-w.svg" alt="" />
                                        Shipment Management</a>
                                </button>
                                <button type="button" class="btn w-100 text-start mt-1 p-2">
                                    <a href="{{ route('admin.driver.index') }}">
                                        <img src="{{ asset('images/track-g.svg') }}" alt="" />
                                        <img src="{{ asset('images/track-w.svg') }}" alt="" />
                                        Drives</a>
                                </button>

                                <button type="button" class="btn w-100 text-start mt-1 p-2">
                                    <a href="{{ route('admin.reports.index') }}">
                                        <img src="{{ asset('images/reports-g.svg') }}" alt="" />
                                        <img src="{{ asset('images/reports-w.svg') }}" alt="" />
                                        Report</a>
                                </button>
                                <button type="button" class="btn w-100 text-start mt-1 p-2">
                                    <a href="{{ route('admin.invoices.index') }}">
                                        <img src="{{ asset('images/incoices-g.svg') }}" alt="" />
                                        <img src="{{ asset('images/incoices-w.svg') }}" alt="" />
                                        Invoices</a>
                                </button>
                            </div>
                        </div>
                        <div class="tools mt-3">
                            <h5>TOOLS</h5>
                            <div class="option">
                                <button type="button" class="btn d-block">
                                    <a href="#"><img src="{{ asset('images/settings.svg') }}" alt="" />
                                        Account &
                                        Setting</a>
                                </button>
                                <button type="button" class="btn d-block">
                                    <a href="#"><img src="{{ asset('images/notifications.svg') }}"
                                            alt="" />
                                        Notification</a>
                                </button>
                                <button type="button" class="btn d-block">
                                    <a href="#"><img src="{{ asset('images/help.svg') }}" alt="" />
                                        Help</a>
                                </button>
                            </div>
                        </div>
                        <div class="UserInfo">
                            <img src="{{ asset('images/user.png') }}" alt="User" />
                            <div class="info ms-1">
                                <p>Ahmad Sweid</p>
                                <span>Admin</span>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
            <!-- ! navTwo -->
            <div class="navTwo d-flex justify-content-md-around justify-content-between py-2 px-5 align-items-start">
                <p class="d-block d-lg-none fs-2 m-0">Invoices</p>
                <div class="popup">
                    <button id="addAlter" type="button" class="btn btn-primary d-lg-none" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">
                        <i class="fa-solid fa-plus" style="color: #ffffff"></i>
                        Add Invoices
                    </button>

                    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body p-0">
                                    <div class="add_what">
                                        <div class="header-add">
                                            <h4>Add Invoices</h4>
                                        </div>
                                        <div class="body-add">
                                            <div class="basic-information mb-5">
                                                <h5 class="mb-3">Basic Information</h5>
                                                <div class="row select-drivers">
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="basic-information mb-5">
                                                <h5 class="mb-3">Basic Information</h5>
                                                <div class="row select-drivers">
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                    <div class="col-5 col-lg-2">
                                                        <label for="">Staff Name</label><br>
                                                        <select name="" id=""></select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="buttons">
                                                <button type="button" class="btn btn-primary me-5">Create
                                                    Invoices</button>
                                                <button type="button" class="btn btn-outline-primary"
                                                    data-bs-dismiss="modal">Cancel</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="choosePage w-100 d-none d-lg-flex justify-content-between">
                    <button type="button" class="btn w-100 text-start mt-2 p-2">
                        <a href="{{ route('admin.dashboard') }}">
                            <img src="{{ asset('images/home-g.svg') }}" alt="" />
                            <img src="{{ asset('images/home-w.svg') }}" alt="" />
                            Home
                        </a>
                    </button>
                    <button type="button" class="btn w-100 text-start mt-2 p-2">
                        <a href="#">
                            <img src="{{ asset('images/shipment-g.svg') }}" alt="" />
                            <img src="{{ asset('images/shipment-w.svg') }}" alt="" />
                            Shipment Management</a>
                    </button>
                    <button type="button" class="btn w-100 text-start mt-2 p-2">
                        <a href="{{ route('admin.driver.index') }}">
                            <img src="{{ asset('images/track-g.svg') }}" alt="" />
                            <img src="{{ asset('images/track-w.svg') }}" alt="" />
                            Drives</a>
                    </button>

                    <button type="button" class="btn w-100 text-start mt-2 p-2">
                        <a href="{{ route('admin.reports.index') }}">
                            <img src="{{ asset('images/reports-g.svg') }}" alt="" />
                            <img src="{{ asset('images/reports-w.svg') }}" alt="" />
                            Reports</a>
                    </button>
                    <button type="button" class="btn w-100 text-start mt-2 p-2 active">
                        <a href="{{ route('admin.invoices.index') }}">
                            <img src="{{ asset('images/incoices-g.svg') }}" alt="" />
                            <img src="{{ asset('images/incoices-w.svg') }}" alt="" />
                            Invoices</a>
                    </button>
                </div>
            </div>
        </header>
    </div>
@endsection

@section('main')
    <div class="content mt-2 container-fluid px-2 px-sm-5 px-lg-4">
        <div class="row mt-3">
            <!-- ! details -->
            <div class="col-12 col-lg-7">
                <!-- ! All items -->
                <div class="details-items">
                    <div class="row">
                        <!-- ! the item -->
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="the-item d-flex gap-2 bg-white rounded-2 p-2 mb-3">
                                <div class="img"><img src="{{ asset('images/money-y.svg') }}" alt="" /></div>
                                <div class="the-details">
                                    <h5 class="m-0">5,205,350.00</h5>
                                    <p class="m-0">Gross salary this month</p>
                                    <p class="the-action-good m-0 mt-3 d-flex align-items-center gap-1">
                                        <img src="{{ asset('images/arrow-up.svg') }}" alt="" />
                                        <span>2%</span>
                                        more than last month
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- ! the item -->
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="the-item d-flex gap-2 bg-white rounded-2 p-2 mb-3">
                                <div class="img"><img src="{{ asset('images/money-b.svg') }}" alt="" />
                                </div>
                                <div class="the-details">
                                    <h5 class="m-0">5,205,350.00</h5>
                                    <p class="m-0">Gross salary this month</p>
                                    <p class="the-action-good m-0 mt-3 d-flex align-items-center gap-1">
                                        <img src="{{ asset('images/arrow-up.svg') }}" alt="" />
                                        <span>2%</span>
                                        more than last month
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- ! the item -->
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="the-item d-flex gap-2 bg-white rounded-2 p-2 mb-3">
                                <div class="img"><img src="{{ asset('images/money-p.svg') }}" alt="" />
                                </div>
                                <div class="the-details">
                                    <h5 class="m-0">5,205,350.00</h5>
                                    <p class="m-0">Gross salary this month</p>
                                    <p class="the-action-bad m-0 mt-3 d-flex align-items-center gap-1">
                                        <img src="{{ asset('images/arrow-down.svg') }}" alt="" />
                                        <span>2%</span>
                                        more than last month
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ! Chart -->
            <div class="col-12 col-lg-5">
                <div class="chart bg-white p-2 rounded-3">
                    <!-- ! Chart header -->
                    <div class="chart-header d-flex justify-content-between align-items-center">
                        <h6 class="fw-bold">Annual payroll summary</h6>
                        <div class="percents d-flex flex-grow-1 justify-content-end align-items-center">
                            <p class="net-salary m-0 ms-5 position-relative">Net Salary</p>
                            <p class="tax m-0 ms-5 position-relative">Tax</p>
                            <p class="loan m-0 ms-5 position-relative">Loan</p>
                        </div>
                    </div>
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </div>
        <div id="table-and-dropdown" class="my-3">
            <div class="row">
                <div class="col-12">
                    <!-- ! Latest Shaping -->
                    <div class="latest-shipping">
                        <!-- ! header -->
                        <div class="latest-shipping-header For-Headers">
                            <h4>Invoices</h4>
                            <h4 class="totalItems"><span>100</span> Invoices</h4>
                        </div>
                        <!-- ! body -->
                        <div class="latest-shipping-body mb-2">
                            <!-- ! column name -->
                            <div class="column-name d-none d-lg-flex">
                                <p>Title <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                                <p>Level <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                                <p>Basic Salary <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                                <p>Gross Salary <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                                <p>Deductions <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                                <p>Net Salary <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                                <p>Net Salary <img src="{{ asset('images/sort.svg') }}" alt="" /></p>
                            </div>
                            <!-- ! column value -->
                            <div class="column-value">
                                <div
                                    class="the-row d-flex justify-content-between flex-wrap flex-lg-nowrap overflow-y-hidden pt-0 pt-lg-2">
                                    <p class="m-0 order-id d-flex justify-content-between">
                                        <span><span class="ORDERID d-lg-none me-1">Title</span>Managing
                                            Director</span><span class="d-inline-block d-lg-none toHide"><img
                                                src="{{ asset('images/arrow-up-simple.svg') }}" alt="" /></span>
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Level</span>MD/CEO
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Basic Salary</span>$445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Gross Salary</span>$445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Deductions</span>$445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Net Salary</span>
                                        $445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Net Salary</span>
                                        <button type="button" class="btn edit">Edit</button>
                                        <button type="button" class="btn delete">Delete</button>
                                    </p>
                                </div>
                                <div
                                    class="the-row d-flex justify-content-between flex-wrap flex-lg-nowrap overflow-y-hidden pt-0 pt-lg-2">
                                    <p class="m-0 order-id d-flex justify-content-between">
                                        <span><span class="ORDERID d-lg-none me-1">Title</span>Managing
                                            Director</span><span class="d-inline-block d-lg-none toHide"><img
                                                src="{{ asset('images/arrow-up-simple.svg') }}" alt="" /></span>
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Level</span>MD/CEO
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Basic Salary</span>$445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Gross Salary</span>$445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Deductions</span>$445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Net Salary</span>
                                        $445,331.00
                                    </p>
                                    <p class="mt-1 m-lg-0 text-start text-lg-center">
                                        <span class="d-inline-block d-lg-none me-2">Net Salary</span>
                                        <button type="button" class="btn edit">Edit</button>
                                        <button type="button" class="btn delete">Delete</button>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- ! Footer -->
                        <div class="latest-shipping-footer d-flex justify-content-between">
                            <div class="items d-flex align-items-center gap-2">
                                <select name="" id="">
                                    <option value="10">10</option>
                                </select>
                                <span>item per page</span>
                                <p class="m-0">
                                    <span class="sum-items">1 - 10</span> of
                                    <span class="total-items">items</span>
                                </p>
                            </div>
                            <div class="pages d-flex align-items-center gap-2">
                                <select name="" id="">
                                    <option value="1">1</option>
                                </select>
                                <p class="m-0">of <span class="total-page">44</span> pages</p>
                                <div class="slide">
                                    <span class="prev">&lt;</span>
                                    <span class="next">&gt;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');

        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [
                    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
                ],
                datasets: [{
                        label: 'Blue Segment',
                        data: [350000, 380000, 400000, 420000, 380000, 360000, 300000, 310000, 370000, 400000,
                            420000, 480000
                        ],
                        backgroundColor: '#3090ff',
                        stack: 'combined',
                        borderRadius: 10,
                        barPercentage: 0.5,
                    },
                    {
                        label: 'Purple Segment',
                        data: [30000, 20000, 25000, 20000, 15000, 30000, 40000, 20000, 25000, 30000, 20000,
                            30000
                        ],
                        backgroundColor: '#9C27B0',
                        stack: 'combined',
                        borderRadius: 10,
                        barPercentage: 0.5,
                    },
                    {
                        label: 'Orange Segment',
                        data: [50000, 70000, 50000, 40000, 30000, 40000, 50000, 30000, 40000, 60000, 70000,
                            80000
                        ],
                        backgroundColor: '#FF9800',
                        stack: 'combined',
                        borderRadius: 10,
                        barPercentage: 0.5,
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: {
                        stacked: true
                    },
                    y: {
                        stacked: true,
                        ticks: {
                            callback: function(value) {
                                return value / 1000 + 'k';
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false // Hides the legend (dataset labels)
                    },
                    title: {
                        display: false // Hides the title
                    }
                }
            }
        });
    </script>
@endsection