@extends('layouts.app')

@section('content')
<!-- Nepali Datepicker CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nepali-datepicker/dist/css/nepali-datepicker.min.css">

<!-- jQuery (required by nepali-datepicker) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Nepali Datepicker JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/nepali-datepicker/dist/js/nepali-datepicker.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Nepali datepicker
        $('#uploaded_date').nepaliDatePicker();
    });
</script>

<!-- start page title -->
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">श्रेणी परिवर्तन निवेदन सम्पादन</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">ड्यासबोर्ड</a></li>
                    <li class="breadcrumb-item active">श्रेणी परिवर्तन सम्पादन</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<!-- end 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" aria-label="Close"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
@endif

<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">श्रेणी परिवर्तन निवेदन सम्पादन गर्नुहोस्</h4>
            </div>
            <div class="card-body">
                <form action="{{ make_route('mem-level.update-form', $memberLevel->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">मिति <span class="text-danger">*</span></label>
                            <input id="uploaded_date" type="text" class="form-control @error('uploaded_date') is-invalid @enderror"
                                   name="uploaded_date" value="{{ $memberLevel->uploaded_date ?? old('uploaded_date') }}" required autocomplete="off">
                            @error('uploaded_date')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">हालको श्रेणी</label>
                            <input type="text" class="form-control" value="{{ $memberLevel->previousLevel->level ?? 'N/A' }}" readonly>
                            <small class="text-muted">यो तपाईंको हालको श्रेणी हो</small>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="targeted_level_id" class="form-label">लक्षित श्रेणी <span class="text-danger">*</span></label>
                            <select name="targeted_level_id" class="form-control @error('targeted_level_id') is-invalid @enderror" required>
                                <option value="">लक्षित श्रेणी छान्नुहोस्</option>
                                @foreach($levels as $level)
                                    @if($level->id != $memberLevel->previous_level_id)
                                        <option value="{{ $level->id }}" {{ ($memberLevel->targeted_level_id == $level->id || old('targeted_level_id') == $level->id) ? 'selected' : '' }}>
                                            {{ $level->level }}
                                        </option>
                                    @endif
                                @endforeach
                            </select>
                            @error('targeted_level_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">भुक्तान गरिएको रकम <span class="text-danger">*</span></label>
                            <input id="voucher_amount" type="number" step="0.01" min="0"
                                   class="form-control @error('voucher_amount') is-invalid @enderror"
                                   name="voucher_amount" value="{{ $memberLevel->voucher_amount ?? old('voucher_amount') }}" required>
                            @error('voucher_amount')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">भौचर नम्बर <span class="text-danger">*</span></label>
                            <input id="voucher_no" type="text" class="form-control @error('voucher_no') is-invalid @enderror"
                                   name="voucher_no" value="{{ $memberLevel->voucher_no ?? old('voucher_no') }}" required>
                            @error('voucher_no')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">भौचर अपलोड</label>
                            <input id="voucher_file" type="file" class="form-control @error('voucher_file') is-invalid @enderror"
                                   name="voucher_file" accept=".pdf,.jpg,.jpeg,.png">
                            <small class="text-muted">PDF, JPG, JPEG, PNG (अधिकतम 500KB) - नयाँ फाइल अपलोड गर्न मात्र</small>
                            @if($memberLevel->voucher_file && $memberLevel->voucher_file !== '0')
                                <div class="mt-1">
                                    <a href="{{ storage_url($memberLevel->voucher_file) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                        <i class="bx bx-file me-1"></i>हालको भौचर हेर्नुहोस्
                                    </a>
                                </div>
                            @endif
                            @error('voucher_file')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">कागजात अपलोड</label>
                            <input id="document_file" type="file" class="form-control @error('document_file') is-invalid @enderror"
                                   name="document_file" accept=".pdf,.jpg,.jpeg,.png">
                            <small class="text-muted">PDF, JPG, JPEG, PNG (अधिकतम 500KB) - नयाँ फाइल अपलोड गर्न मात्र</small>
                            @if($memberLevel->document_file && $memberLevel->document_file !== '0')
                                <div class="mt-1">
                                    <a href="{{ storage_url($memberLevel->document_file) }}" target="_blank" class="btn btn-outline-primary btn-sm">
                                        <i class="bx bx-file me-1"></i>हालको कागजात हेर्नुहोस्
                                    </a>
                                </div>
                            @endif
                            @error('document_file')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">दर्ता प्रमाणपत्र</label>
                            <input id="darta_pramanpatra_file" type="file" class="form-control @error('darta_pramanpatra_file') is-invalid @enderror"
                                   name="darta_pramanpatra_file" accept=".pdf,.jpg,.jpeg,.png">
                            <small class="text-muted">PDF, JPG, JPEG, PNG (अधिकतम 500KB) - नयाँ फाइल अपलोड गर्न मात्र</small>
                            @if(isset($memberLevel->darta_pramanpatra_file) && $memberLevel->darta_pramanpatra_file && $memberLevel->darta_pramanpatra_file !== '0')
                                <div class="mt-1">
                                    <a href="{{ storage_url($memberLevel->darta_pramanpatra_file) }}" target="_blank" class="btn btn-outline-success btn-sm">
                                        <i class="bx bx-file-blank me-1"></i>हालको दर्ता प्रमाणपत्र हेर्नुहोस्
                                    </a>
                                </div>
                            @endif
                            @error('darta_pramanpatra_file')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{{ route('dashboard') }}" class="btn btn-secondary waves-effect waves-light">
                            <i class="bx bx-x me-1"></i>रद्द गर्नुहोस्
                        </a>
                        <button type="submit" class="btn btn-success waves-effect waves-light">
                            <i class="bx bx-edit me-1"></i>अपडेट गर्नुहोस्
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">हालको जानकारी</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-borderless mb-0">
                        <tbody>
                            <tr>
                                <th class="ps-0" scope="row">हालको स्थिति:</th>
                                <td class="text-muted">
                                    @switch($memberLevel->application_status)
                                        @case('pending')
                                            <span class="badge bg-warning">पेन्डिङ</span>
                                            @break
                                        @case('rejected')
                                            <span class="badge bg-danger">अस्वीकृत</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary">{{ $memberLevel->application_status }}</span>
                                    @endswitch
                                </td>
                            </tr>
                            <tr>
                                <th class="ps-0" scope="row">निवेदन मिति:</th>
                                <td class="text-muted">{{ $memberLevel->created_at->format('Y-m-d') }}</td>
                            </tr>
                            <tr>
                                <th class="ps-0" scope="row">अन्तिम अपडेट:</th>
                                <td class="text-muted">{{ $memberLevel->updated_at->format('Y-m-d H:i:s') }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                @if($memberLevel->rejected_reason)
                <div class="mt-3 p-2 bg-danger-light rounded border border-danger">
                    <small class="text-danger">
                        <strong>अस्वीकारको कारण:</strong><br>
                        {{ $memberLevel->rejected_reason }}
                    </small>
                </div>
                @endif

                @if($memberLevel->admin_remarks)
                <div class="mt-3 p-2 bg-warning-light rounded border border-warning">
                    <small class="text-dark">
                        <strong>प्रशासनिक टिप्पणी:</strong><br>
                        {{ $memberLevel->admin_remarks }}
                    </small>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
<!-- end row -->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                if (alert.classList.contains('show')) {
                    alert.classList.remove('show');
                }
            });
        }, 5000);
    });
</script>
@endsection