@extends('layout.main')

@section('content')
    <div class="container grid px-6 mx-auto">
        <h4 class="mb-4 mt-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
            Incomes Report
        </h4>
        <div class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
            <h4 class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
                Select Data Range
            </h4>
            <form action="{{ route('reports.incomes.filter') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <x-form.input name="start_date" type="date" label="Start Date" required
                        value="{{ old('start_date') }}" />
                    <x-form.input name="end_date" type="date" label="End Date" required value="{{ old('end_date') }}" />
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="block mb-4 text-sm">
                        <span class="text-gray-700 dark:text-gray-400">*Select Branch</span>
                        <select name="branch" id="branch"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('gender') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option selected>Select branch</option>
                            <option value="all" @selected(old('branch')=='all')>All</option>
                            @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}" @selected($branch->id == old('branch'))>
                                {{ $branch->town }} {{ $branch->address }}</option>
                                @endforeach
                            </select>
                            @error('branch')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </label> 
                        <label class="block mb-4 text-sm">
                            <span class="text-gray-700 dark:text-gray-400">*Select Type</span>
                            <select name="type" id="type"
                            class="select2 block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 form-select @error('gender') border-red-600 focus:border-red-400 focus:outline-none focus:shadow-outline-red @enderror focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray">
                            <option selected>Select Type</option> 
                            <option @selected(old('type')=='client_charges') value="client_charges">Client Charges</option>
                            <option @selected(old('type')=='interests') value="interests">Loan Interests</option>
                            <option @selected(old('type')=='loan_charges') value="loan_charges">Loan Charges</option>
                            <option @selected(old('type')=='penalties') value="penalties">Loan Penalties</option>
                            {{-- <option @selected(old('type')=='fees') value="fees">Loan Fees</option> --}}
                        </select>
                        @error('type')
                            <p class="text-red-700 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </label> 
                </div>
                <div class="flex justify-end mt-6 gap-4">
                    <x-button label="Filter" type="submit" />
                </div>
            </form>
        </div>
    </div> 
@endsection