@extends('layouts.app')

@section('content')

{{-- SUCCESS TOAST --}}
@if(session('success'))
    <div id="successToast">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div id="errorToast">
        <i class="fa fa-times-circle"></i> {{ session('error') }}
    </div>
@endif

{{-- ERRORS --}}
@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show mb-4">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

{{-- OUTER CARD --}}
<div class="card">

    {{-- Card Header --}}
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3>
            <i class="fa fa-arrow-circle-right"></i>
            {{ isset($agencyProof) ? 'Edit' : 'Submit' }} Agency Payment Proof
        </h3>
        <a href="{{ route('agentproof.show') }}" class="btn btn-danger btn-sm px-4">
            <i class="fa fa-arrow-left me-1"></i> Back
        </a>
    </div>

    {{-- Breadcrumb --}}
    <div class="card-header border-bottom-0 px-4 py-2" style="border-top: 1px solid #f1f1f4;">
        <ul class="breadcrumb fs-7 my-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Home</a></li>
            <li class="breadcrumb-item">Agent Proof</li>
            <li class="breadcrumb-item">{{ isset($agencyProof) ? 'Edit' : 'Submit' }}</li>
        </ul>
    </div>

    {{-- Card Body --}}
    <div class="card-body pt-4">

        <form method="POST" action="{{ route('agencyproof.save') }}" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="recordid" value="{{ $agencyProof->id ?? '' }}">

            {{-- Basic Details --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header">
                    <i class="fa fa-user"></i> Basic Details
                </div>
                <div class="section-panel__body">
                    <div class="row g-4">

                        {{-- Full Name --}}
                        <div class="col-md-6">
                            <label class="setting-label">Full Name <span class="text-danger">*</span></label>
                            <input type="text" name="full_name" class="setting-input"
                                   placeholder="Enter full name"
                                   value="{{ old('full_name', $agencyProof->full_name ?? '') }}" required>
                        </div>

                        {{-- Company Name ← WAS MISSING --}}
                        <div class="col-md-6">
                            <label class="setting-label">Company Name</label>
                            <input type="text" name="company_name" class="setting-input"
                                   placeholder="Enter company name"
                                   value="{{ old('company_name', $agencyProof->company_name ?? '') }}">
                        </div>

                        {{-- Email ← WAS MISSING --}}
                        <div class="col-md-6">
                            <label class="setting-label">Email</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-envelope input-icon"></i>
                                <input type="email" name="email" class="setting-input setting-input--icon"
                                       placeholder="Enter email address"
                                       value="{{ old('email', $agencyProof->email ?? '') }}">
                            </div>
                        </div>

                        {{-- Mobile Number ← WAS MISSING --}}
                        <div class="col-md-6">
                            <label class="setting-label">Mobile Number</label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-phone input-icon"></i>
                                <input type="text" name="mobile_number" class="setting-input setting-input--icon"
                                       placeholder="Enter mobile number"
                                       value="{{ old('mobile_number', $agencyProof->mobile_number ?? '') }}">
                            </div>
                        </div>

                        {{-- Paid Amount --}}
                        <div class="col-md-6">
                            <label class="setting-label">Paid Amount <span class="text-danger">*</span></label>
                            <div class="input-icon-wrap">
                                <i class="fa fa-indian-rupee-sign input-icon" style="font-size:13px;"></i>
                                <input type="number" name="paid_amt" class="setting-input setting-input--icon"
                                       placeholder="Enter paid amount"
                                       value="{{ old('paid_amt', $agencyProof->paid_amt ?? '') }}" required>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {{-- Payment Method --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header">
                    <i class="fa fa-credit-card"></i> Payment Method
                </div>
                <div class="section-panel__body">
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="setting-label">Payment Method <span class="text-danger">*</span></label>
                            <select name="payment_method" id="payment_method" class="setting-input setting-select" required>
                                <option value="">Select Payment Method</option>
                                <option value="cash" {{ old('payment_method', $agencyProof->payment_method ?? '') == 'cash' ? 'selected' : '' }}>Cash in Hand</option>
                                <option value="upi"  {{ old('payment_method', $agencyProof->payment_method ?? '') == 'upi'  ? 'selected' : '' }}>UPI</option>
                                <option value="bank" {{ old('payment_method', $agencyProof->payment_method ?? '') == 'bank' ? 'selected' : '' }}>Bank Transfer</option>
                            </select>
                        </div>
                    </div>

                    {{-- UPI Fields --}}
                    <div id="upi_fields" class="payment-section d-none mt-4">
                        <div class="payment-method-panel payment-method-panel--upi">
                            <div class="payment-method-panel__title">
                                <i class="fa fa-mobile-screen-button"></i> UPI Payment Details
                            </div>
                            <div class="row g-4 mt-1">
                                <div class="col-md-6">
                                    <label class="setting-label">UPI ID</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-at input-icon"></i>
                                        <input type="text" name="upi_id" class="setting-input setting-input--icon"
                                               placeholder="name@upi"
                                               value="{{ old('upi_id', $agencyProof->upi_id ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="setting-label">Transaction ID</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-hashtag input-icon"></i>
                                        <input type="text" name="upi_transaction_id" class="setting-input setting-input--icon"
                                               placeholder="Enter transaction ID"
                                               value="{{ old('upi_transaction_id', $agencyProof->transaction_id ?? '') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Bank Transfer Fields --}}
                    <div id="bank_fields" class="payment-section d-none mt-4">
                        <div class="payment-method-panel payment-method-panel--bank">
                            <div class="payment-method-panel__title">
                                <i class="fa fa-building-columns"></i> Bank Transfer Details
                            </div>
                            <div class="row g-4 mt-1">
                                <div class="col-md-6">
                                    <label class="setting-label">Bank Account Number</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-credit-card input-icon"></i>
                                        <input type="text" name="bank_account_number" class="setting-input setting-input--icon"
                                               placeholder="Enter bank account number"
                                               value="{{ old('bank_account_number', $agencyProof->bank_account_number ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="setting-label">Transaction ID</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-hashtag input-icon"></i>
                                        <input type="text" name="bank_transaction_id" class="setting-input setting-input--icon"
                                               placeholder="Enter transaction ID"
                                               value="{{ old('bank_transaction_id', $agencyProof->transaction_id ?? '') }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Cash Fields --}}
                    <div id="cash_fields" class="payment-section d-none mt-4">
                        <div class="payment-method-panel payment-method-panel--cash">
                            <div class="payment-method-panel__title">
                                <i class="fa fa-money-bill-wave"></i> Cash Payment Details
                            </div>
                            <div class="row g-4 mt-1">
                                <div class="col-md-6">
                                    <label class="setting-label">Received By</label>
                                    <div class="input-icon-wrap">
                                        <i class="fa fa-user input-icon"></i>
                                        <input type="text" name="cash_received_by" class="setting-input setting-input--icon"
                                               placeholder="Enter receiver's name"
                                               value="{{ old('cash_received_by', $agencyProof->cash_received_by ?? '') }}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="setting-label">Date Received</label>
                                    <input type="date" name="cash_received_date" class="setting-input"
                                           value="{{ old('cash_received_date', $agencyProof->cash_received_date ?? '') }}">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- Proof Upload & Status --}}
            <div class="section-panel mb-4">
                <div class="section-panel__header">
                    <i class="fa fa-upload"></i> Proof &amp; Status
                </div>
                <div class="section-panel__body">
                    <div class="row g-4">

                        <div class="col-md-6">
                            <label class="setting-label">Upload Payment Proof {{ isset($agencyProof) ? '' : '*' }}</label>
                            @if(isset($agencyProof->payment_proof) && $agencyProof->payment_proof)
                                @php $fileExt = pathinfo($agencyProof->payment_proof, PATHINFO_EXTENSION); @endphp
                                <div class="media-preview mb-2">
                                    @if(in_array(strtolower($fileExt), ['jpg', 'jpeg', 'png', 'gif']))
                                        <img src="{{ asset('uploads/' . $agencyProof->payment_proof) }}"
                                             alt="Payment Proof" height="40">
                                        <span class="media-label">Current Proof</span>
                                    @elseif(strtolower($fileExt) === 'pdf')
                                        <i class="fa fa-file-pdf text-danger"></i>
                                        <a href="{{ asset('uploads/' . $agencyProof->payment_proof) }}"
                                           target="_blank" class="media-label text-primary">View PDF</a>
                                    @endif
                                </div>
                            @endif
                            <input type="file" name="payment_proof" class="setting-input"
                                   accept="image/*,.pdf" {{ isset($agencyProof) ? '' : 'required' }}>
                            <small class="text-muted">Allowed: JPG, PNG, PDF</small>
                        </div>

                        <div class="col-md-6">
                            <label class="setting-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="setting-input setting-select" required>
                                <option value="">Select Status</option>
                                @foreach(['processing' => 'Processing', 'pending' => 'Pending', 'approved' => 'Approved', 'rejected' => 'Rejected'] as $val => $label)
                                    <option value="{{ $val }}"
                                        {{ old('status', $agencyProof->status ?? '') == $val ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-end">
                <button type="submit" class="btn btn-primary px-4">
                    <i class="fa fa-save me-1"></i>
                    {{ isset($agencyProof) ? 'Update' : 'Submit' }} Proof
                </button>
            </div>

        </form>

    </div>{{-- /card-body --}}

</div>{{-- /card --}}


<style>
    #successToast, #errorToast {
        position: fixed; bottom: 30px; left: 30px;
        color: #fff; padding: 12px 20px; border-radius: 6px;
        font-size: 14px; font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 9999; display: flex; align-items: center; gap: 8px;
        animation: fadeInUp 0.3s ease;
    }
    #successToast { background-color: #155724; }
    #errorToast   { background-color: #721c24; }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .card-header h3 {
        font-size: 16px; font-weight: 600; margin: 0;
        display: flex; align-items: center; gap: 8px;
    }
    .section-panel { border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; }
    .section-panel__header {
        display: flex; align-items: center; gap: 8px;
        background: #f8f9fc; border-bottom: 1px solid #e9ecef;
        padding: 12px 18px; font-size: 13px; font-weight: 600; color: #333;
    }
    .section-panel__header .fa { color: var(--bs-primary); font-size: 14px; }
    .section-panel__body { padding: 20px 18px; }
    .payment-method-panel {
        border-radius: 10px; padding: 16px 18px;
        border: 1.5px dashed #dee2e6; background: #f8f9fc;
    }
    .payment-method-panel--upi  { border-color: #90caf9; background: #e3f2fd22; }
    .payment-method-panel--bank { border-color: #a5d6a7; background: #e8f5e922; }
    .payment-method-panel--cash { border-color: #ffe082; background: #fff8e122; }
    .payment-method-panel__title {
        font-size: 13px; font-weight: 700; color: #333;
        margin-bottom: 4px; display: flex; align-items: center; gap: 7px;
    }
    .payment-method-panel--upi  .payment-method-panel__title { color: #1565c0; }
    .payment-method-panel--bank .payment-method-panel__title { color: #2e7d32; }
    .payment-method-panel--cash .payment-method-panel__title { color: #f57f17; }
    .setting-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 6px; }
    .setting-input {
        width: 100%; padding: 10px 14px;
        border: 1px solid #dee2e6; border-radius: 10px;
        font-size: 14px; outline: none; background: #f8f9fc;
        transition: border-color 0.2s, box-shadow 0.2s; color: #333;
    }
    .setting-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
        background: #fff;
    }
    .setting-select { appearance: auto; cursor: pointer; }
    .input-icon-wrap { position: relative; }
    .input-icon {
        position: absolute; left: 14px; top: 50%;
        transform: translateY(-50%);
        color: #aaa; font-size: 14px; pointer-events: none;
    }
    .setting-input--icon { padding-left: 38px; }
    .media-preview {
        display: inline-flex; align-items: center; gap: 10px;
        background: #f8f9fc; border: 1px solid #dee2e6;
        border-radius: 8px; padding: 8px 14px;
    }
    .media-label { font-size: 12px; color: #888; font-weight: 500; }
</style>

<script>
    ['successToast','errorToast'].forEach(function(id) {
        var t = document.getElementById(id);
        if (t) {
            setTimeout(function () {
                t.style.transition = 'opacity 0.5s ease';
                t.style.opacity = '0';
                setTimeout(function () { t.remove(); }, 500);
            }, 3000);
        }
    });

    function togglePaymentFields(method) {
        document.querySelectorAll('.payment-section').forEach(function(el) {
            el.classList.add('d-none');
        });
        if (method === 'upi')  document.getElementById('upi_fields').classList.remove('d-none');
        if (method === 'bank') document.getElementById('bank_fields').classList.remove('d-none');
        if (method === 'cash') document.getElementById('cash_fields').classList.remove('d-none');
    }

    document.addEventListener('DOMContentLoaded', function () {
        var sel = document.getElementById('payment_method');
        togglePaymentFields(sel.value);
        sel.addEventListener('change', function () {
            togglePaymentFields(this.value);
        });
    });
</script>

@endsection