@extends('member-fetch-admin.layouts.app')

@section('title', 'Member Fetch Dashboard')

@section('content')
<div class="container py-3">

    <!-- Error Alerts -->
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h6 class="fw-bold mb-1"><i class="fa-solid fa-circle-exclamation me-2"></i>Validation / Search Error</h6>
            <ul class="mb-0 ps-3">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- ================================================== -->
    <!-- INPUT SECTION -->
    <!-- ================================================== -->
    <div class="card section-card">
        <!-- #c6aa76 Primary Header -->
        <div class="section-header-primary d-flex align-items-center justify-content-between">
            <h5 class="m-0 fw-bold"><i class="fa-solid fa-filter me-2"></i>Member Verification & Search</h5>
            <span class="badge bg-white text-dark font-monospace fw-semibold">Identity Verification Required</span>
        </div>
        <div class="card-body p-4">
            <!-- Red "Input" Heading -->
            <h4 class="section-heading-red border-bottom pb-2 mb-3">
                <i class="fa-solid fa-pen-to-square me-2"></i>Input
            </h4>

            <form action="{{ route('member-fetch-admin.member.search') }}" method="POST" id="searchForm">
                @csrf

                <div class="row g-3 align-items-end">
                    <!-- First Name -->
                    <div class="col-md-3">
                        <label for="first_name" class="form-label fw-bold text-secondary">First Name <span class="text-danger">*</span></label>
                        <input type="text" name="first_name" id="first_name" 
                            class="form-control form-control-lg @error('first_name') is-invalid @enderror" 
                            value="{{ old('first_name', $input['first_name'] ?? '') }}" 
                            required placeholder="e.g. Prashant">
                        @error('first_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Last Name -->
                    <div class="col-md-3">
                        <label for="last_name" class="form-label fw-bold text-secondary">Last Name <span class="text-danger">*</span></label>
                        <input type="text" name="last_name" id="last_name" 
                            class="form-control form-control-lg @error('last_name') is-invalid @enderror" 
                            value="{{ old('last_name', $input['last_name'] ?? '') }}" 
                            required placeholder="e.g. Test">
                        @error('last_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Mobile No -->
                    <div class="col-md-3">
                        <label for="mobile" class="form-label fw-bold text-secondary">Mobile No. <span class="text-danger">*</span></label>
                        <input type="text" name="mobile" id="mobile" 
                            class="form-control form-control-lg @error('mobile') is-invalid @enderror" 
                            value="{{ old('mobile', $input['mobile'] ?? '') }}" 
                            required placeholder="e.g. 9594349228">
                        @error('mobile')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- CAPTCHA Field -->
                    <div class="col-md-3">
                        <label class="form-label fw-bold text-secondary">CAPTCHA <span class="text-danger">*</span></label>
                        <div class="d-flex align-items-center gap-1 mb-1">
                            <div class="captcha-img-box flex-grow-1 text-center py-1">
                                <img src="{{ route('member-fetch-admin.captcha') }}?type=search&t={{ time() }}" id="searchCaptchaImg" alt="CAPTCHA" style="height: 36px;">
                            </div>
                            <button type="button" class="btn btn-outline-secondary btn-sm p-2" onclick="refreshCaptcha('searchCaptchaImg')" title="Refresh CAPTCHA">
                                <i class="fa-solid fa-rotate-right"></i>
                            </button>
                        </div>
                        <input type="text" name="captcha" id="captcha" class="form-control @error('captcha') is-invalid @enderror" required placeholder="Enter CAPTCHA" autocomplete="off">
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="d-flex justify-content-end mt-4 pt-2 border-top">
                    <button type="submit" class="btn btn-custom-search btn-lg shadow-sm" id="searchBtn">
                        <i class="fa-solid fa-magnifying-glass me-2"></i> [ Search / Verify ]
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- ================================================== -->
    <!-- OUTPUT SECTION -->
    <!-- ================================================== -->
    <div class="card section-card">
        <!-- Yellow/Orange Header (Unchanged as requested) -->
        <div class="section-header-orange d-flex align-items-center justify-content-between">
            <h5 class="m-0 fw-bold text-dark"><i class="fa-solid fa-table-list me-2"></i>Member Identity Output</h5>
            @if(isset($searched) && $searched)
                <span class="badge bg-dark text-white px-3 py-2 fs-6">
                    Records Found: {{ $records->count() }}
                </span>
            @endif
        </div>
        <div class="card-body p-4">
            <!-- Red "Output" Heading -->
            <h4 class="section-heading-red border-bottom pb-2 mb-3">
                <i class="fa-solid fa-id-card me-2"></i>Output
            </h4>

            @if(!isset($searched) || !$searched)
                <div class="text-center py-5 text-muted">
                    <i class="fa-solid fa-user-check display-4 opacity-50 mb-3"></i>
                    <h5 class="fw-semibold">No Search Executed Yet</h5>
                    <p class="mb-0">Fill in First Name, Last Name, Mobile No. and CAPTCHA above to verify member details.</p>
                </div>
            @elseif($records->isEmpty())
                <div class="alert alert-warning border-start border-4 border-warning p-4 shadow-sm" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fa-solid fa-triangle-exclamation text-warning display-5 me-3"></i>
                        <div>
                            <h5 class="alert-heading fw-bold m-0 text-dark">No matching member record found.</h5>
                            <p class="mb-0 text-secondary mt-1">Please double-check the entered First Name, Last Name, and Mobile Number.</p>
                        </div>
                    </div>
                </div>
            @else
                <div class="table-responsive rounded border shadow-sm">
                    <table class="table table-hover table-striped align-middle m-0 table-custom">
                        <thead>
                            <tr>
                                <th>Membership No.</th>
                                <th>Membership Type</th>
                                <th>Tier</th>
                                <th>Membership Status</th>
                                <th>Membership Since</th>
                                <th>Enrollment Unit</th>
                                <th>Total Loyalty Points</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($records as $member)
                                <tr>
                                    <td>
                                        <span class="fw-bold text-dark font-monospace fs-6">
                                            {{ $member->member_number ?? 'N/A' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-light text-dark border">
                                            {{ $member->membership_type ?? 'Lalit Loyalty' }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-warning text-dark fw-bold px-3 py-2 fs-6">
                                            <i class="fa-solid fa-crown me-1"></i> {{ strtoupper($member->tier ?? 'BLUE') }}
                                        </span>
                                    </td>
                                    <td>
                                        @if(strtolower($member->status ?? 'active') === 'active')
                                            <span class="badge bg-success px-3 py-2">
                                                <i class="fa-solid fa-circle-check me-1"></i> Active
                                            </span>
                                        @else
                                            <span class="badge bg-secondary px-3 py-2">
                                                {{ ucfirst($member->status ?? 'Inactive') }}
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <span class="font-monospace text-dark">
                                            @if($member->enrollment_date)
                                                {{ \Carbon\Carbon::parse($member->enrollment_date)->format('d-m-Y') }}
                                            @elseif($member->created_at)
                                                {{ $member->created_at->format('d-m-Y') }}
                                            @else
                                                N/A
                                            @endif
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-secondary fw-semibold">
                                            {{ $member->enrollment_channel ?? ($member->enrolling_location ?? 'N/A') }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="fw-bold text-dark font-monospace fs-6">
                                            {{ number_format($member->total_loyalty_points ?? 0) }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif

        </div>
    </div>

</div>
@endsection

@section('scripts')
<script>
    document.getElementById('searchForm')?.addEventListener('submit', function() {
        const btn = document.getElementById('searchBtn');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Searching...';
        }
    });
</script>
@endsection