@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 flex gap-2">
        <a href="{{ route('reports.print-branch-statement-summary', request()->query()) }}" target="_blank"
           class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg shadow-md transition inline-flex items-center">
            Print Summary
        </a>
        <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>
                <div x-data="{ 
                    open: false, 
                    selected: {{ json_encode(array_filter(explode(',', request('service_ids', '')))) }}, 
                    originalSelected: {{ json_encode(array_filter(explode(',', request('service_ids', '')))) }},
                    services: @js($services->map(fn($s) => ['id' => $s->id, 'name' => $s->name]))
                }" @click="if(!open) originalSelected = [...selected]" @click.outside="open = false; if(JSON.stringify(selected) !== JSON.stringify(originalSelected)) { document.getElementById('filterForm').submit() }" class="relative">
                    <button type="button" @click="open = !open" class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm py-1.5 px-3 text-left bg-white flex justify-between items-center">
                        <span x-text="selected.length > 0 ? selected.length + ' service(s) selected' : 'All Services'"></span>
                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div x-show="open" x-transition class="absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto" style="display: none;">
                        <template x-for="service in services" :key="service.id">
                            <label class="flex items-center px-3 py-2 hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" :value="service.id" x-model="selected" class="mr-2 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                <span class="text-sm" x-text="service.name"></span>
                            </label>
                        </template>
                    </div>
                    <input type="hidden" name="service_ids" x-bind:value="selected.length > 0 ? selected.join(',') : ''">
                </div>
            </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>

            <div>
                <label class="block text-sm font-medium text-gray-700">Transaction Type</label>
                <select name="transaction_type" 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 Types</option>
                    <option value="customer_payment" {{ request('transaction_type') === 'customer_payment' ? 'selected' : '' }}>Customer Payment</option>
                    <option value="due_collection" {{ request('transaction_type') === 'due_collection' ? 'selected' : '' }}>Due Collection</option>
                    <option value="refund" {{ request('transaction_type') === 'refund' ? 'selected' : '' }}>Refund</option>
                    <option value="agent_commission" {{ request('transaction_type') === 'agent_commission' ? 'selected' : '' }}>Agent Commission</option>
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Bank Method</label>
                <select name="bank_method" 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 Banks</option>
                    @foreach($bankMethods as $method)
                        <option value="{{ $method }}" {{ request('bank_method') === $method ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $method)) }}</option>
                    @endforeach
                </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>
            <div class="bg-pink-50 p-4 rounded-lg border border-pink-200">
                <p class="text-sm text-pink-700 font-medium">Today Profit</p>
                <p class="text-xl font-bold text-pink-900">{{ number_format($todayProfit, 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($paginatedRecords 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">
                            @if($record['service_order_id'])
                            <a href="{{ route('service-orders.show', $record['service_order_id']) }}" class="text-blue-600 hover:underline font-bold" title="View Service Order">
                                {{ Str::limit(Str::of($record['invoice_no'])->replace('-', ''), 12) }}
                            </a>
                            @else
                            {{ Str::limit(Str::of($record['invoice_no'])->replace('-', ''), 12) }}
                            @endif
                        </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>

        @if($totalRecords > 0)
        <div class="mt-4 flex justify-between items-center">
            <p class="text-sm text-gray-700">
                Showing {{ ($page - 1) * $perPage + 1 }} to {{ min($page * $perPage, $totalRecords) }} of {{ $totalRecords }} results
            </p>
            <div class="flex gap-2">
                @if($page > 1)
                    <a href="?{{ http_build_query(array_merge(request()->query(), ['page' => $page - 1])) }}" class="px-3 py-1 border rounded hover:bg-gray-50">Previous</a>
                @endif
                
                @for($i = max(1, $page - 2); $i <= min($totalPages, $page + 2); $i++)
                    <a href="?{{ http_build_query(array_merge(request()->query(), ['page' => $i])) }}" 
                       class="px-3 py-1 border rounded hover:bg-gray-50 {{ $i == $page ? 'bg-blue-500 text-white hover:text-gray-600 hover:bg-blue-600' : '' }}">
                        {{ $i }}
                    </a>
                @endfor
                
                @if($page < $totalPages)
                    <a href="?{{ http_build_query(array_merge(request()->query(), ['page' => $page + 1])) }}" class="px-3 py-1 border rounded hover:bg-gray-50">Next</a>
                @endif
            </div>
        </div>
        @endif
        @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: 100,
            paging: false,
            searching: true,
            ordering: true,
            responsive: true,
            order: [[0, 'desc']],
            columnDefs: [{ targets: [6,7,8,9,10,11,12], className: 'text-right' }]
        });
    });
</script>
@endpush