@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="#">सदस्य</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-12">
        <div class="card">
            <div class="card-body">
                <!-- Back Button -->
                <div class="row">
                    <div class="col-sm">
                        <div class="mb-4">
                            <a href="{{make_route('member.details', $memberInfo->id)}}" class="btn btn-success waves-effect waves-light">
                                <i class="fa fa-arrow-left"></i> अघिल्लो पृष्ठ
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Member Basic Information -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h5 class="mb-3">सदस्यको जानकारी</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>सदस्यको नाम</th>
                                        <th>जन्म मिति</th>
                                        <th>बुबाको नाम</th>
                                        <th>आमाको नाम</th>
                                        <th>हालको श्रेणी</th>
                                        <th>विशेषज्ञता</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>{{$memberInfo->nameeng}}</td>
                                        <td>{{$memberInfo->dob}}</td>
                                        <td>{{$memberInfo->fname}}</td>
                                        <td>{{$memberInfo->mname}}</td>
                                        <td><span class="badge bg-primary">{{$memberInfo->level->level}}</span></td>
                                        <td>{{$memberInfo->specialization->specialization}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Notice and Form Section -->
                @if($activeLevelChangeNotice)
                    <!-- Active Notice Display -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="alert alert-info border-0">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <h5 class="alert-heading mb-2">
                                            <i class="bx bx-info-circle me-2"></i>{{ $activeLevelChangeNotice->notice_title }}
                                        </h5>
                                        <p class="mb-2">{{ $activeLevelChangeNotice->notice_detail }}</p>
                                        <small class="text-muted">
                                            <strong>प्रकाशन मिति:</strong> {{ $activeLevelChangeNotice->published_date->format('Y-m-d') }} |
                                            <strong>अन्तिम मिति:</strong> {{ $activeLevelChangeNotice->last_date->format('Y-m-d') }} {{ $activeLevelChangeNotice->last_time->format('H:i') }}
                                        </small>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <button type="button" class="btn btn-primary" id="openFormBtn">
                                            <i class="bx bx-edit me-1"></i>निवेदन फारम खोल्नुहोस्
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Level Change Application Form (Initially Hidden) -->
                    <div class="row mb-4" id="levelChangeForm" style="display: none;">
                        <div class="col-12">
                            <div class="card border border-primary">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="card-title mb-0 text-white">
                                        <i class="bx bx-edit me-2"></i>श्रेणी परिवर्तन निवेदन फारम
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form action="{{make_route('mem-level.store') }}" method="POST" enctype="multipart/form-data">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-4 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="{{ 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-4 mb-3">
                                                <label class="form-label">हालको श्रेणी</label>
                                                <input type="text" class="form-control" value="{{ $memberInfo->level->level }}" readonly>
                                                <small class="text-muted">यो तपाईंको हालको श्रेणी हो</small>
                                            </div>

                                            <div class="col-md-4 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="" disabled selected>लक्षित श्रेणी छान्नुहोस्</option>
                                                    @foreach($levels as $level)
                                                        @if($level->id != $memberInfo->level_id)
                                                            <option value="{{ $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-4 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="{{ old('voucher_amount') }}" required>
                                                @error('voucher_amount')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-md-4 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="{{ old('voucher_no') }}" required>
                                                @error('voucher_no')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>

                                            <div class="col-md-4 mb-3">
                                                <label class="form-label">भौचर अपलोड <span class="text-danger">*</span></label>
                                                <input id="voucher_file" type="file" class="form-control @error('voucher_file') is-invalid @enderror"
                                                       name="voucher_file" accept=".pdf,.jpg,.jpeg,.png" required>
                                                <small class="text-muted">PDF, JPG, JPEG, PNG (अधिकतम 500KB)</small>
                                                @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">कागजात अपलोड <span class="text-danger">*</span></label>
                                                <input id="document_file" type="file" class="form-control @error('document_file') is-invalid @enderror"
                                                    name="document_file" accept=".pdf,.jpg,.jpeg,.png" required>
                                                <small class="text-muted">PDF, JPG, JPEG, PNG (अधिकतम 500KB)</small>
                                                @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">दर्ता प्रमाणपत्र <span class="text-danger">*</span></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" required>
                                                <small class="text-muted">PDF, JPG, JPEG, PNG (अधिकतम 500KB)</small>
                                                @error('darta_pramanpatra_file')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-12">
                                                <div class="d-flex gap-2">
                                                    <button class="btn btn-primary waves-effect waves-light" type="submit">
                                                        <i class="bx bx-save me-1"></i>निवेदन पेश गर्नुहोस्
                                                    </button>
                                                    <button class="btn btn-secondary waves-effect waves-light" type="button" id="closeFormBtn">
                                                        <i class="bx bx-x me-1"></i>रद्द गर्नुहोस्
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <!-- No Active Notice -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="alert alert-warning border-0" role="alert">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1">
                                        <h5 class="alert-heading mb-2">
                                            <i class="bx bx-time me-2"></i>श्रेणी परिवर्तनको लागि सूचनाको प्रतीक्षा गर्नुहोस्
                                        </h5>
                                        <p class="mb-0">
                                            हाल श्रेणी परिवर्तनको लागि कुनै सक्रिय सूचना छैन। कृपया सूचनाको लागि प्रतीक्षा गर्नुहोस्।
                                        </p>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <button type="button" class="btn btn-warning" disabled>
                                            <i class="bx bx-time me-1"></i>सूचनाको प्रतीक्षा गर्नुहोस्
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Applications History Table -->
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="mb-0">श्रेणी परिवर्तनका निवेदनहरूको इतिहास</h5>
                            <span class="badge bg-info">कुल निवेदनहरू: {{ count($memlevels) }}</span>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 4%;">क्र.सं.</th>
                                        <th style="width: 8%;">मिति</th>
                                        <th style="width: 10%;">पुरानो श्रेणी</th>
                                        <th style="width: 10%;">लक्षित श्रेणी</th>
                                        <th style="width: 8%;">भुक्तान रकम</th>
                                        <th style="width: 8%;">भौचर नं.</th>
                                        <th style="width: 6%;">भौचर</th>
                                        <th style="width: 6%;">कागजात</th>
                                        <th style="width: 6%;">दर्ता प्रमाणपत्र</th>
                                        <th style="width: 8%;">स्थिति</th>
                                        <th style="width: 26%;">कार्य</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($memlevels as $sn => $memberlevel)
                                    <tr class="{{ $memberlevel->is_current == '1' ? 'table-success' : '' }}">
                                        <td>{{ ++$sn }}</td>
                                        <td>{{ $memberlevel->uploaded_date }}</td>
                                        <td>
                                            @if($memberlevel->previousLevel)
                                                <span class="badge bg-secondary">{{ $memberlevel->previousLevel->level }}</span>
                                            @else
                                                <span class="text-muted">N/A</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($memberlevel->targetedLevel)
                                                <span class="badge bg-info">{{ $memberlevel->targetedLevel->level }}</span>
                                            @else
                                                <span class="badge bg-info">{{ getLevelFromId($memberlevel->level_id) }}</span>
                                            @endif
                                        </td>
                                        <td>रु. {{ number_format($memberlevel->voucher_amount, 2) }}</td>
                                        <td>{{ $memberlevel->voucher_no }}</td>
                                        <td class="text-center">
                                            @if ($memberlevel->voucher_file !== '0' && !empty($memberlevel->voucher_file))
                                                <a href="{{ storage_url($memberlevel->voucher_file) }}" target="_blank"
                                                   class="btn btn-sm btn-outline-primary" title="भौचर हेर्नुहोस्">
                                                    <i class="bx bx-file"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($memberlevel->document_file !== '0' && !empty($memberlevel->document_file))
                                                <a href="{{ storage_url($memberlevel->document_file) }}" target="_blank"
                                                   class="btn btn-sm btn-outline-primary" title="कागजात हेर्नुहोस्">
                                                    <i class="bx bx-file"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if (isset($memberlevel->darta_pramanpatra_file) && $memberlevel->darta_pramanpatra_file !== '0' && !empty($memberlevel->darta_pramanpatra_file))
                                                <a href="{{ storage_url($memberlevel->darta_pramanpatra_file) }}" target="_blank"
                                                class="btn btn-sm btn-outline-success" title="दर्ता प्रमाणपत्र हेर्नुहोस्">
                                                    <i class="bx bx-file-blank"></i>
                                                </a>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($memberlevel->is_current == '1')
                                                <span class="badge bg-success">सक्रिय</span>
                                            @else
                                                @switch($memberlevel->application_status)
                                                    @case('pending')
                                                        <span class="badge bg-warning">पेन्डिङ</span>
                                                        @break
                                                    @case('under_review')
                                                        <span class="badge bg-info">समीक्षाधीन</span>
                                                        @break
                                                    @case('approved')
                                                        <span class="badge bg-success">स्वीकृत</span>
                                                        @break
                                                    @case('rejected')
                                                        <span class="badge bg-danger">अस्वीकृत</span>
                                                        @break
                                                    @default
                                                        <span class="badge bg-secondary">अज्ञात</span>
                                                @endswitch
                                            @endif
                                        </td>
                                        <td>
                                            @if($memberlevel->is_current == '1')
                                                <span class="text-success">
                                                    <i class="bx bx-check"></i> सक्रिय श्रेणी
                                                </span>
                                            @elseif($memberlevel->application_status === 'approved' && $memberlevel->id == $memberlevel->checklatest() && auth()->user()->usertype != '3')
                                                <a href="{{ make_route('mem-level.accept-level', $memberlevel->id) }}"
                                                   class="btn btn-sm btn-success">
                                                    <i class="bx bx-check me-1"></i>सक्रिय गर्नुहोस्
                                                </a>
                                            @elseif($memberlevel->application_status === 'pending' && auth()->user()->usertype != '3')
                                                <div class="btn-group" role="group">
                                                    <button type="button" class="btn btn-sm btn-success" onclick="updateStatus({{ $memberlevel->id }}, 'approved')">
                                                        <i class="bx bx-check"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-sm btn-danger" onclick="showRejectModal({{ $memberlevel->id }})">
                                                        <i class="bx bx-x"></i>
                                                    </button>
                                                </div>
                                            @elseif(in_array($memberlevel->application_status, ['pending', 'rejected']) && auth()->user()->usertype == '3')
                                                <div class="d-flex flex-column gap-1">
                                                    <a href="{{ make_route('mem-level.edit-form', $memberlevel->id) }}" class="btn btn-sm btn-primary">
                                                        <i class="bx bx-edit me-1"></i>सम्पादन
                                                    </a>
                                                    @if($memberlevel->application_status === 'rejected')
                                                        <small class="text-danger">
                                                            {{ Str::limit($memberlevel->rejected_reason ?? 'कारण नदिइएको', 30) }}
                                                        </small>
                                                    @endif
                                                </div>
                                            @elseif($memberlevel->application_status === 'rejected')
                                                <small class="text-danger">
                                                    कारण: {{ Str::limit($memberlevel->rejected_reason ?? 'कुनै कारण उल्लेख गरिएको छैन', 50) }}
                                                </small>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="10" class="text-center py-4">
                                            <div class="text-muted">
                                                <i class="bx bx-info-circle me-2"></i>
                                                कुनै श्रेणी परिवर्तनको निवेदन फेला परेन
                                            </div>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Reject Modal -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="rejectModalLabel">निवेदन अस्वीकार गर्नुहोस्</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="rejectForm" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="rejected_reason" class="form-label">अस्वीकारको कारण <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="rejected_reason" name="rejected_reason" rows="3"
                                  placeholder="निवेदन अस्वीकार गर्नुको कारण लेख्नुहोस्" required></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">रद्द गर्नुहोस्</button>
                    <button type="submit" class="btn btn-danger">अस्वीकार गर्नुहोस्</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Show/Hide form functionality
        const openFormBtn = document.getElementById('openFormBtn');
        const closeFormBtn = document.getElementById('closeFormBtn');
        const levelChangeForm = document.getElementById('levelChangeForm');

        if (openFormBtn) {
            openFormBtn.addEventListener('click', function() {
                levelChangeForm.style.display = 'block';
                this.style.display = 'none';
                levelChangeForm.scrollIntoView({ behavior: 'smooth' });
            });
        }

        if (closeFormBtn) {
            closeFormBtn.addEventListener('click', function() {
                levelChangeForm.style.display = 'none';
                if (openFormBtn) {
                    openFormBtn.style.display = 'block';
                }
            });
        }

        // Auto-hide alerts after 5 seconds
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert-dismissible');
            alerts.forEach(function(alert) {
                if (alert.classList.contains('show')) {
                    alert.classList.remove('show');
                }
            });
        }, 5000);
    });

    // Approve application function
    function approveApplication(id) {
        if (confirm('के तपाईं यो श्रेणी परिवर्तन स्वीकार गर्न चाहनुहुन्छ?')) {
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `{{ url('admin/level-changes') }}/${id}/approve`;

            const csrfToken = document.createElement('input');
            csrfToken.type = 'hidden';
            csrfToken.name = '_token';
            csrfToken.value = '{{ csrf_token() }}';

            form.appendChild(csrfToken);
            document.body.appendChild(form);
            form.submit();
        }
    }

    // Show reject modal
    function showRejectModal(id) {
        const modal = new bootstrap.Modal(document.getElementById('rejectModal'));
        const form = document.getElementById('rejectForm');
        form.action = `{{ url('admin/level-changes') }}/${id}/reject`;
        modal.show();
    }

    // Show send back modal
    function showSendBackModal(id) {
        const modal = new bootstrap.Modal(document.getElementById('sendBackModal'));
        const form = document.getElementById('sendBackForm');
        form.action = `{{ url('admin/level-changes') }}/${id}/send-back`;
        modal.show();
    }
</script>
@endsection