@extends('layouts.app')

@section('title', 'Branch Statement Report')

@section('content')
<div class="container mx-auto p-4 relative">
    <!-- Print Button -->
    <div class="absolute top-4 right-4 z-10">
        <a href="{{ route('reports.print-branch-statement', request()->query()) }}" target="_blank"
           class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition inline-flex items-center">
            Print Preview
        </a>
    </div>

    <div class="bg-white shadow-lg rounded-lg p-6 mt-12">
        <h1 class="text-2xl font-bold text-blue-800 mb-6 text-center">Branch Statement Report</h1>

        <form id="filterForm" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">From Date</label>
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700">To Date</label>
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
            </div>

            @if(!$isBranchAdmin)
            <div>
                <label class="block text-sm font-medium text-gray-700">Branch</label>
                <select name="branch_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option value="">All Branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif

            <div>
                <label class="block text-sm font-medium text-gray-700">Service</label>
                <select name="service_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option value="">All Services</option>
                    @foreach($services as $service)
                        <option value="{{ $service->id }}" {{ request('service_id') == $service->id ? 'selected' : '' }}>{{ $service->name }}</option>
                    @endforeach
                </select>
            </div>

            @if(!$isBranchAdmin)
            <div>
                <label class="block text-sm font-medium text-gray-700">Agent</label>
                <select name="agent_id" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option value="">All Agents</option>
                    @foreach($agents as $agent)
                        <option value="{{ $agent->id }}" {{ request('agent_id') == $agent->id ? 'selected' : '' }}>{{ $agent->name }}</option>
                    @endforeach
                </select>
            </div>
            @endif
            <div>
                <label class="block text-sm font-medium text-gray-700">Statement Type</label>
                <select name="type"
                    onchange="this.form.submit()"
                    class="mt-1 block w-40 rounded-md border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
                    <option value="transactions" {{ request('type', 'transactions') === 'transactions' ? 'selected' : '' }}>Transactions</option>
                    <option value="invoices" {{ request('type') === 'invoices' ? 'selected' : '' }}>Invoices</option>
                    <option value="all" {{ request('type') === 'all' ? 'selected' : '' }}>All</option>
                </select>
            </div>
        </form>

        @if($records->isNotEmpty())
        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-6">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200"> 
                <p class="text-sm text-blue-700 font-medium">Total Sales</p> 
                <p class="text-xl font-bold text-blue-900">{{ number_format($totalSales, 2) }}</p> 
            </div> 
            <div class="bg-green-50 p-4 rounded-lg border border-green-200"> 
                <p class="text-sm text-green-700 font-medium">Total Cash (SR)</p> 
                <p class="text-xl font-bold text-green-900">{{ number_format($totalCash, 2) }}</p> 
            </div> 
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200"> 
                <p class="text-sm text-teal-700 font-medium">Total Bank (SR)</p> 
                <p class="text-xl font-bold text-teal-900">{{ number_format($totalBank, 2) }}</p> 
            </div> 
            <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200"> 
                <p class="text-sm text-yellow-700 font-medium">Total Due</p> 
                <p class="text-xl font-bold text-yellow-900">{{ number_format($totalDue, 2) }}</p> 
            </div> 
            <div class="bg-orange-50 p-4 rounded-lg border border-orange-200"> 
                <p class="text-sm text-orange-700 font-medium">Total Due Collection</p> 
                <p class="text-xl font-bold text-orange-900">{{ number_format($totalDueCollection, 2) }}</p> 
            </div> 
            <div class="bg-red-50 p-4 rounded-lg border border-red-200"> 
                <p class="text-sm text-red-700 font-medium">Total Refund</p> 
                <p class="text-xl font-bold text-red-900">{{ number_format($totalRefund, 2) }}</p> 
            </div> 
            <div class="bg-amber-50 p-4 rounded-lg border border-amber-200"> 
                <p class="text-sm text-amber-700 font-medium">Total Service Charge Deduction</p> 
                <p class="text-xl font-bold text-amber-900">{{ number_format($totalServiceChargeDeduction, 2) }}</p> 
            </div> 
            @if(!$isBranchAdmin) 
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-200"> 
                <p class="text-sm text-purple-700 font-medium">Total Agent Commission (Payable)</p> 
                <p class="text-xl font-bold text-purple-900">{{ number_format($totalAgentCommissionPayable, 2) }}</p> 
            </div>
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-200"> 
                <p class="text-sm text-purple-700 font-medium">Total Agent Commission (Paid)</p> 
                <p class="text-xl font-bold text-purple-900">{{ number_format($totalAgentCommissionPaid, 2) }}</p> 
            </div>
            <div class="bg-pink-50 p-4 rounded-lg border border-pink-200"> 
                <p class="text-sm text-pink-700 font-medium">Total Profit</p> 
                <p class="text-xl font-bold text-pink-900">{{ number_format($totalProfit, 2) }}</p> 
            </div> 
            @endif

            <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
                <p class="text-sm text-blue-700 font-medium">Today Sales</p>
                <p class="text-xl font-bold text-blue-900">{{ number_format($todaySales, 2) }}</p>
            </div>
            <div class="bg-green-50 p-4 rounded-lg border border-green-200">
                <p class="text-sm text-green-700 font-medium">Today Cash (SR)</p>
                <p class="text-xl font-bold text-green-900">{{ number_format($todayCash, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Today Bank (SR)</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($todayBank, 2) }}</p>
            </div>
            <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200">
                <p class="text-sm text-yellow-700 font-medium">Today Due</p>
                <p class="text-xl font-bold text-yellow-900">{{ number_format($todayDue, 2) }}</p>
            </div>
            <div class="bg-rose-50 p-4 rounded-lg border border-rose-200">
                <p class="text-sm text-rose-700 font-medium">Today Due Collection</p>
                <p class="text-xl font-bold text-rose-900">{{ number_format($todayDueCollection, 2) }}</p>
            </div>
            <div class="bg-red-50 p-4 rounded-lg border border-red-200">
                <p class="text-sm text-red-700 font-medium">Today Refund</p>
                <p class="text-xl font-bold text-red-900">{{ number_format($todayRefund, 2) }}</p>
            </div>
            <div class="bg-amber-50 p-4 rounded-lg border border-amber-200"> 
                <p class="text-sm text-amber-700 font-medium">Today Service Charge Deduction</p> 
                <p class="text-xl font-bold text-amber-900">{{ number_format($todayServiceChargeDeduction, 2) }}</p> 
            </div>
            @if(!$isBranchAdmin)
            <div class="bg-fuchsia-50 p-4 rounded-lg border border-fuchsia-200">
                <p class="text-sm text-fuchsia-700 font-medium">Today Agent Commission (Paid)</p>
                <p class="text-xl font-bold text-fuchsia-900">{{ number_format($todayAgentCommissionPaid, 2) }}</p>
            </div>
            @endif

            <!--
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Today Cash Payable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($todayCashPayableToBranches, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Today Bank Payable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($todayBankPayableToBranches, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Today Cash Receivable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($todayCashRecievableFromBranches, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Today Bank Receivable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($todayBankRecievableFromBranches, 2) }}</p>
            </div>
            -->

            <!--
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Total Cash Payable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($totalCashPayableToBranches, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Total Bank Payable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($totalBankPayableToBranches, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Total Cash Receivable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($totalCashRecievableFromBranches, 2) }}</p>
            </div>
            <div class="bg-teal-50 p-4 rounded-lg border border-teal-200">
                <p class="text-sm text-teal-700 font-medium">Total Bank Receivable (SR)- B2B</p>
                <p class="text-xl font-bold text-teal-900">{{ number_format($totalBankRecievableFromBranches, 2) }}</p>
            </div>
            -->
        </div>

        <!-- Table -->
        <div class="overflow-x-auto">
            <table id="branchStatementTable" class="min-w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-blue-100">
                    <tr>
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Created</th>
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Delivery</th>
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Invoice No</th>
                        @if(!$isBranchAdmin)
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Branch</th>
                        @endif
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Customer</th>
                        <th class="px-2 py-2 text-left font-medium text-blue-900">ID</th>
                        @if(!$isBranchAdmin)
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Phone</th>
                        @endif
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Service</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Rate</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Cash</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Bank</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Due</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Due Coll.</th>
                        @if(!$isBranchAdmin)
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Agent Comm.</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Agent</th>
                        <th class="px-2 py-2 text-right font-medium text-blue-900">Profit</th>
                        @endif
                        <th class="px-2 py-2 text-left font-medium text-blue-900">Type</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($records as $record)
                    <tr class="hover:bg-blue-50">
                        <td class="px-2 py-1">{{ \Carbon\Carbon::parse($record['date'])->format('Y-m-d') }}</td>
                        <td class="px-2 py-1">{{ $record['delivery_date'] ? \Carbon\Carbon::parse($record['delivery_date'])->format('Y-m-d') : 'N/A' }}</td>
                        <td class="px-2 py-1 font-bold">{{ Str::limit(Str::of($record['invoice_no'])->replace('-', ''), 12) }}</td>
                        @if(!$isBranchAdmin)
                        <td class="px-2 py-1">{{ Str::limit($record['branch_name'] ?? 'N/A', 8) }}</td>
                        @endif
                        <td class="px-2 py-1">{{ Str::limit($record['customer_name'], 10) }}</td>
                        <td class="px-2 py-1">{{ Str::limit($record['customer_id'] ?? 'N/A', 6) }}</td>
                        @if(!$isBranchAdmin)
                        <td class="px-2 py-1">{{ $record['customer_phone'] }}</td>
                        @endif
                        <td class="px-2 py-1">{{ Str::limit($record['service_name'] ?? 'N/A', 10) }}</td>
                        <td class="px-2 py-1 text-right">{{ number_format($record['service_rate'] ?? 0, 2) }}</td>
                        <td class="px-2 py-1 text-right">{{ number_format($record['cash'] ?? 0, 2) }}</td>
                        <td class="px-2 py-1 text-right">{{ number_format($record['bank'] ?? 0, 2) }}</td>
                        <td class="px-2 py-1 text-right">{{ number_format($record['due'] ?? 0, 2) }}</td>
                        <td class="px-2 py-1 text-right">{{ number_format($record['due_collection'] ?? 0, 2) }}</td>
                        @if(!$isBranchAdmin)
                        <td class="px-2 py-1 text-right">{{ number_format($record['agent_commission_payable'] ?? 0, 2) }}</td>
                        <td class="px-2 py-1 text-right">{{ $record['agent_name'] ?? 'N/A' }}</td>
                        <td class="px-2 py-1 text-right font-semibold text-green-700">{{ number_format($record['profit'] ?? 0, 2) }}</td>
                        @endif
                        <td class="px-2 py-1">{{ ucfirst($record['type'] ?? 'N/A') }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p class="text-center py-10 text-lg font-semibold text-gray-500">No data found.</p>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.querySelectorAll('#filterForm select, #filterForm input').forEach(el => {
        el.addEventListener('change', () => document.getElementById('filterForm').submit());
    });
</script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.tailwindcss.min.js"></script>
<script>
    $(document).ready(function() {
        $('#branchStatementTable').DataTable({
            pageLength: 25,
            responsive: true,
            order: [[0, 'desc']],
            columnDefs: [{ targets: [6,7,8,9,10,11,12], className: 'text-right' }]
        });
    });
</script>
@endpush