@extends('layout.app')
@section('title', 'Shopkeeper Report')
@section('page-title', 'Shopkeeper Report')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h3 class="card-title mb-0">
                            {{ $shopkeeper['shop_name'] ?? 'N/A' }} - {{ $shopkeeper['city'] ?? 'N/A' }}
                        </h3>
                        <p class="mb-0">
                            Report Period: {{ \Carbon\Carbon::parse($starting_date)->format('d/m/Y') }} to
                            {{ \Carbon\Carbon::parse($ending_date)->format('d/m/Y') }}
                        </p>
                    </div>
                    <div>
                        <a href="{{ route('shopkeeper.print-report', ['id' => $shopkeeper['id'], 'from_date' => $starting_date, 'to_date' => $ending_date]) }}"
                            class="btn btn-primary" target="_blank">
                            <i class="fas fa-print"></i> Print
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <!-- Date Range Selector -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <form method="GET" action="{{ route('shopkeeper.report', ['id' => $shopkeeper['id']]) }}"
                                class="d-flex gap-2 align-items-end">
                                <div class="flex-grow-1">
                                    <label for="from_date" class="form-label">From Date</label>
                                    <input type="date" id="from_date" name="from_date" class="form-control"
                                        value="{{ $starting_date }}">
                                </div>
                                <div class="flex-grow-1">
                                    <label for="to_date" class="form-label">To Date</label>
                                    <input type="date" id="to_date" name="to_date" class="form-control"
                                        value="{{ $ending_date }}">
                                </div>
                                <button type="submit" class="btn btn-info">
                                    <i class="fas fa-search"></i> Search
                                </button>
                                <a href="{{ route('shopkeeper.report', ['id' => $shopkeeper['id']]) }}"
                                    class="btn btn-secondary">
                                    <i class="fas fa-redo"></i> Reset
                                </a>
                            </form>
                        </div>
                    </div>

                    <!-- Starting Amount -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="p-3 border">
                                <strong>Starting Balance:</strong><br>
                                Rs. {{ number_format($starting_amount ?? 0, 2) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border">
                                <strong>Ending Balance:</strong><br>
                                Rs. {{ number_format($ending_amount ?? 0, 2) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="p-3 border">
                                <strong>Net Change:</strong><br>
                                Rs. {{ number_format(($ending_amount ?? 0) - ($starting_amount ?? 0), 2) }}
                            </div>
                        </div>
                    </div>

                    <!-- Bills Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-items-center mb-0 text-center">
                            <thead>
                                <tr>
                                    <th style="width: 12%;">Date</th>
                                    <th style="width: 15%;">Bill/Payment #</th>
                                    <th>Payment Mode</th>
                                    <th style="width: 18%;">Debit</th>
                                    <th style="width: 18%;">Credit</th>
                                    <th style="width: 18%;">Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($bill_details ?? [] as $bill)
                                    <tr @if ($bill['type'] === 'payment') class="table-info" @endif>
                                        <td>{{ $bill['date'] ?? 'N/A' }}</td>
                                        <td>{{ $bill['bill_no'] ?? 'N/A' }}@if ($bill['type'] === 'payment')
                                                (Payment)
                                            @endif
                                        </td>
                                        <td>{{ $bill['mode'] }}</td>
                                        <td>Rs. {{ number_format($bill['debit'] ?? 0, 2) }}</td>
                                        <td>Rs. {{ number_format($bill['credit'] ?? 0, 2) }}</td>
                                        <td>Rs. {{ number_format($bill['balance'] ?? 0, 2) }}</td>
                                    </tr>
                                    @empty
                                        <tr>
                                            <td colspan="6" class="text-center py-4">
                                                No bills or payments found for this period
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr class="fw-bold">
                                        <td colspan="3">TOTAL</td>
                                        <td>Rs. {{ number_format($amount_total ?? 0, 2) }}</td>
                                        <td>Rs. {{ number_format($cash_payment_total ?? 0, 2) }}</td>
                                        <td>Rs. {{ number_format($ending_amount ?? 0, 2) }}</td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    <div class="card-footer d-flex justify-content-between">
                        <a href="{{ route('shopkeepers.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <style>
            @media print {

                .card-header button,
                .card-header a,
                .card-footer,
                .btn {
                    display: none !important;
                }

                .card {
                    box-shadow: none !important;
                    border: 1px solid #dee2e6;
                }
            }
        </style>

        <style>
            .spinner {
                display: inline-block;
                width: 12px;
                height: 12px;
                border: 2px solid #ffffff;
                border-radius: 50%;
                border-top-color: transparent;
                animation: spin 0.8s linear infinite;
                margin-right: 5px;
            }

            @keyframes spin {
                to {
                    transform: rotate(360deg);
                }
            }
        </style>
    @endsection