@extends('user.layouts')
@section('title', 'Financial Track')
@section('header')
<!-- DataTable CSS -->
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/dataTables.bootstrap5.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{{ asset('/assets') }}/css/datatable/buttons.dataTables.min.css">
@endsection
@section('content')
<div class="container-fluid page-wrapper">
    <div class="row">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="page-top-heading">Financial Track</h3>
            <button class="btn btn-primary excel-btn"><i class="fa-solid fa-arrow-up-from-bracket me-3"></i>Export
                Data</button>
        </div>
    </div>
    <!-- Card Row Stars -->
    <div class="row mt-4 ">
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                <div class="card-body">
                    <p class="card-title">Pack Sum</p>
                    <h6 class="value-show">{{ $pack_sum }}</h6>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                <div class="card-body">
                    <p class="card-title">Tax Sum</p>
                    <h6 class="value-show">{{ $tax_sum }}</h6>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                <div class="card-body">
                    <p class="card-title">Agent Sum</p>
                    <h6 class="value-show">{{ $agent_sum }}</h6>
                </div>
            </div>
        </div>
        <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-6">
            <div class="card user-widget-card mb-3 mb-sm-3 mb-md-0 mb-lg-0 mb-xl-0 mb-xxl-0">
                <div class="card-body">
                    <p class="card-title">Total Revenue</p>
                    <h6 class="value-show">{{ $total_revenue }}</h6>
                </div>
            </div>
        </div>
    </div>
    <!-- Card Row Ends -->
    <!--Form Filter Row -->
    <form action="{{ route('date_finance') }}" method="POST">
        @csrf
        <div class="row mt-4 mb-5">
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-5 filter-first-child-col">
                <div class="d-flex justify-content-center align-items-center">
                    <label class="mb-0 filter-by-p">Search by:</label>
                    <input type="date" class="form-control filter-input" name="from_date" placeholder="Date From"
                        data-bs-toggle="tooltip" data-bs-placement="top" title="Choose Date From" required>
                </div>
            </div>
            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-5 filter-first-child-col">
                <div class=" justify-content-center align-items-center">
                    <input type="date" class="form-control filter-input" name="to_date" placeholder="Date To"
                        data-bs-toggle="tooltip" data-bs-placement="top" title="Choose Date To" required>
                </div>
            </div>
            <div class="col-xl-2 col-lg-2 col-md-2 col-sm-2 col-2 d-flex align-items-center">
                <button type="submit" class="btn search-icon-btn"><i
                        class="fa-solid fa-magnifying-glass text-white"></i></button>
            </div>
        </div>
    </form>
    <div class="row mt-4">
        <div class="card basic-card">
            <div class="card-body">
                <!-- Table Row -->
                <div class="row">
                    <table id="data-table" class="table nowrap align-middle" style="width:100%">
                        <thead>
                            <tr>
                                <th>SN</th>
                                <th>NAME</th>
                                <th>PHONE NO</th>
                                <th>TYPE</th>
                                <th>AGENT ID</th>
                                <th>REFERRAL ID</th>
                                <th>PACK PRICE</th>
                                <th>TAX PRICE</th>
                                <th>AGENT REFERRAL</th>
                                <th>TOTAL REVENUE</th>
                            </tr>
                        </thead>
                        @php
                        $sn = 1;
                        @endphp
                        <tbody>
                            @php $sn = 1; @endphp
                            @foreach ($business as $finance)
                            @php
                            $data = $check_vendor[$finance->id] ?? [
                            'packPrice' => 0,
                            'taxAmount' => 0,
                            'commissionAmount' => 0,
                            'revenue' => 0
                            ];
                            @endphp
                            <tr>
                                <td>{{ $sn++ }}</td>
                                <td>{{ $finance->name }}</td>
                                <td>{{ $finance->phone_number }}</td>
                                <td>{{ $finance->user->type ?? 'Self' }}</td>
                                <td>{{ $finance->user->agent_code ?? '-' }}</td>
                                <td>{{ $finance->user->to_reffer ?? '-' }}</td>
                                {{-- 👉 EXACT DB VALUES --}}
                                <td>₹ {{ number_format($data['packPrice'], 2) }}</td>
                                <td>₹ {{ number_format($data['taxAmount'], 2) }}</td>
                                <td>₹ {{ number_format($data['commissionAmount'], 2) }}</td>
                                <td>₹ {{ number_format($data['revenue'], 2) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Container Fluid ends -->
@endsection
@section('footer')
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Datatable JS -->
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.html5.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/buttons.print.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/jszip.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/pdfmake.min.js"></script>
<script type="text/javascript" src="{{ asset('/assets') }}/js/datatable/vfs_fonts.js"></script>
<script>
    $(document).ready(function() {
        var table1 = $('#data-table').DataTable({
            dom: 'Bfrtip',
            buttons: [{
                extend: 'excelHtml5',
                text: 'Export to Excel',
                className: 'd-none',
                filename: 'Financial Track'
            }],
            responsive: true
        });
        $('.excel-btn').on('click', function() {
            table1.button('.buttons-excel').trigger();
        });
    });
</script>
@endsection