@extends('admin_dashboard')
@section('admin')

<style>
    .report-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        transition: box-shadow 0.3s ease;
    }
    .report-card:hover {
        box-shadow: 0 8px 30px rgba(0,0,0,0.14);
    }
    .report-card .card-header {
        border-radius: 12px 12px 0 0;
        padding: 16px 24px;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: 0.3px;
    }
    .report-card .card-body {
        padding: 24px;
    }
    .report-card .form-label {
        font-weight: 500;
        color: #555;
        font-size: 13px;
        margin-bottom: 5px;
    }
    .report-card .form-control,
    .report-card .form-select {
        border-radius: 8px;
        border: 1px solid #dde2ec;
        font-size: 13px;
        padding: 8px 12px;
        background-color: #fafbfc;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .report-card .form-control:focus,
    .report-card .form-select:focus {
        border-color: #20a0a0;
        box-shadow: 0 0 0 3px rgba(32,160,160,0.12);
        background-color: #fff;
    }
    .btn-report {
        border-radius: 8px;
        font-weight: 600;
        font-size: 13px;
        padding: 9px 0;
        letter-spacing: 0.4px;
        transition: all 0.2s ease;
    }
    .btn-report:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(32,160,160,0.35);
    }
    .page-title-area {
        background: linear-gradient(135deg, #008080 0%, #20b2aa 100%);
        border-radius: 12px;
        padding: 18px 24px;
        margin-bottom: 28px;
        color: #fff;
    }
    .page-title-area h4 {
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        letter-spacing: 0.4px;
    }
    .page-title-area p {
        margin: 4px 0 0;
        font-size: 12px;
        opacity: 0.8;
    }
    .section-divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    .section-divider span {
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        color: #aaa;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }
    .section-divider::before,
    .section-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e5e9f0;
    }
</style>

<div class="content">
    <div class="container-fluid">

        {{-- Page Title --}}
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="page-title-area">
            <h4><i class="fa fa-file-alt me-2"></i> All Members Report</h4>
            <p>Generate detailed and summary reports for all member types</p>
        </div>

        {{-- Cards Row --}}
        <div class="row g-4 justify-content-center">

            {{-- Card 1: Member Report --}}
            <div class="col-xl-5 col-lg-6 col-md-8">
                <div class="card report-card h-100">
                    <div class="card-header bg-teal text-white" style="background: linear-gradient(135deg,#008080,#20b2aa);">
                        <i class="fa fa-users me-2"></i> Member Report
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('memeber.reports.result') }}" enctype="multipart/form-data" target="_blank">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label" for="member_type">Member Type</label>
                                <select class="form-control form-select" id="member_type" name="member_type">
                                    <option value="">-- Select Member Type --</option>
                                    <option value="0">All</option>
                                    <option value="1">GSS</option>
                                    <option value="2">DMS</option>
                                    <option value="3">RMC</option>
                                    <option value="4">FDR</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="report_type">Report Type</label>
                                <select class="form-control form-select" id="report_type" name="report_type">
                                    <option value="">-- Select Report Type --</option>
                                    <option value="1">Detail Report</option>
                                    <option value="2">Summary Report</option>
                                </select>
                            </div>

                            <div class="section-divider"><span>Date Range</span></div>

                            <div class="row g-2 mb-4">
                                <div class="col-6">
                                    <label class="form-label" for="StartDate1">Date From</label>
                                    <input type="text" class="form-control" id="StartDate1" name="StartDate" placeholder="dd-mm-yyyy">
                                </div>
                                <div class="col-6">
                                    <label class="form-label" for="EndDate1">Date To</label>
                                    <input type="text" class="form-control" id="EndDate1" name="EndDate" placeholder="dd-mm-yyyy">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-success btn-report w-100">
                                <i class="fa fa-print me-2"></i> View Report
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Card 2: Member Statement --}}
            <div class="col-xl-5 col-lg-6 col-md-8">
                <div class="card report-card h-100">
                    <div class="card-header text-white" style="background: linear-gradient(135deg,#1a6b8a,#2196a0);">
                        <i class="fa fa-id-card me-2"></i> Member Statement
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('indv.memeber.report.result') }}" enctype="multipart/form-data" target="_blank">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label" for="stmt_member_type">Member Type</label>
                                <select class="form-control form-select" id="stmt_member_type" name="member_type">
                                    <option value="">-- Select Member Type --</option>
                                    <option value="1">GSS</option>
                                    <option value="2">Other</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label" for="account_no">Account No</label>
                                <input type="text" class="form-control" id="account_no" name="account_no" placeholder="Enter account number">
                            </div>

                            <div class="section-divider"><span>Date Range</span></div>

                            <div class="row g-2 mb-4">
                                <div class="col-6">
                                    <label class="form-label" for="StartDate2">Date From</label>
                                    <input type="text" class="form-control" id="StartDate2" name="StartDate" placeholder="dd-mm-yyyy">
                                </div>
                                <div class="col-6">
                                    <label class="form-label" for="EndDate2">Date To</label>
                                    <input type="text" class="form-control" id="EndDate2" name="EndDate" placeholder="dd-mm-yyyy">
                                </div>
                            </div>

                            <button type="submit" class="btn btn-success btn-report w-100">
                                <i class="fa fa-print me-2"></i> View Statement
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        </div>{{-- end row --}}

    </div>{{-- end container --}}
</div>{{-- end content --}}

@endsection