@include('layouts.header', ['title' => 'View Allotment Request'])
<div class="wrapper">
    @include('layouts.navbar')
    @include('layouts.sidebar')

    <div class="content-page">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box">
                            <div class="page-title-right"></div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-9">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="page-title">View Allotment Request</h4>

                            </div>
                            <div class="card-body form-horizontal-style-2">
                                <div class="mb-3">
                                    <label for="receipt_no" class="form-label">Project Name:</label>
                                    <div class="textview">{{ $allotmentRequest->project->name }}</div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label for="received_from" class="form-label">
                                                Project Location:
                                            </label>
                                            <div class="textview">{{ $allotmentRequest->project->site_location }}</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label for="project_name" class="form-label">
                                                Application ID:
                                            </label>
                                            <div class="textview">{{ $allotmentRequest->application_id }}</div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-3">
                                            <label for="project_name" class="form-label">
                                                Allotment Number:
                                            </label>
                                            <div class="textview">{{ $allotmentRequest->allotment_no }}</div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <label for="fund_category" class="form-label">
                                                Description:
                                            </label>
                                            <div class="textview">
                                                {{ $allotmentRequest->description }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    @if ($allotmentRequest->status > 3)
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="fund_category" class="form-label">
                                                    Status:
                                                </label>
                                                <div class="textview">
                                                    @if ($allotmentRequest->status == 4)
                                                        Approved
                                                    @elseif ($allotmentRequest->status == 5)
                                                        Rejected
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        @if ($allotmentRequest->file)                                
                                            <div class="col-lg-6">
                                                <div class="mb-3">
                                                    <label for="receipt" class="form-label">
                                                        Allotment Letter:
                                                    </label>
                                                    <div class="mt-1">
                                                        <small class="form-text text-muted">
                                                            Current file:
                                                            <a href="javascript:void(0);" class="open-preview"
                                                                data-bs-toggle="tooltip" data-bs-placement="top"
                                                                title="View File"
                                                                data-file-url="{{ asset('storage/' . \App\Utils\Constants::CITIZEN_ALLOTMENT. '/' . $allotmentRequest->file) }}"
                                                                data-file-type="{{ pathinfo($allotmentRequest->file, PATHINFO_EXTENSION) }}">
                                                                {{ $allotmentRequest->file }}
                                                            </a>
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                        @if ($allotmentRequest->remark)
                                            <div class="col-lg-12">
                                                <div class="mb-3">
                                                    <label for="fund_category" class="form-label">
                                                        Remark:
                                                    </label>
                                                    <div class="textview">
                                                        {{ $allotmentRequest->remark }}
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        @if ($allotmentRequest->status == 3)
            <div class="col-lg-9">
                <div class="card">
                    <div class="card-header">
                        <h4 class="page-title">Update Status</h4>
                    </div>
                    <form id="statusUpdateForm"
                        action="{{ route('admin.allotment-requests.update', encrypt($allotmentRequest->id)) }}"
                        method="POST" enctype="multipart/form-data" {{-- required for file uploads --}}>
                        <div class="card-body">
                            @csrf
                            @method('PUT')

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="approval_status" class="form-label">
                                            Approval Status <span class="text-danger">*</span>
                                        </label>
                                        <select name="approval_status" id="approval_status" class="form-control"
                                            required>
                                            <option value="">Select</option>
                                            <option value="4">Accept</option>
                                            <option value="5">Reject</option>
                                        </select>
                                        @error('approval_status')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- File input - shown only if Accept is selected --}}
                            <div class="row" id="fileInputSection" style="display: none;">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="file" class="form-label">
                                            Allotment Letter <span class="text-danger">*</span>
                                        </label>
                                        <input type="file" name="file" id="file"
                                            class="form-control">
                                        @error('file')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            {{-- Remarks field (always visible) --}}
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="remarks" class="form-label">
                                            Remarks
                                        </label>
                                        <textarea name="remarks" id="remarks" rows="4" class="form-control" placeholder="Enter remarks here..."></textarea>
                                        @error('remarks')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer border-top border-light">
                            <button type="submit" class="btn btn-primary" id="submitBtn">Update</button>
                        </div>
                    </form>

                </div>
            </div>
        @endif

        @include('layouts.footer')
    </div>
</div>

<!-- Vendor JS -->
<script src="{{ asset('assets/js/vendor.min.js') }}"></script>
<!-- jQuery UI (should load after vendor.min.js) -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="{{ asset('assets/js/app.min.js') }}"></script>

<script>
    $(document).ready(function() {

        @if ($errors->any())
            @foreach ($errors->all() as $error)
                toastr.error("{{ $error }}");
            @endforeach
        @endif

        @if (session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if (session('error'))
            toastr.error("{{ session('error') }}");
        @endif

        document.getElementById('statusUpdateForm').addEventListener('submit', function() {
            const submitBtn = document.getElementById('submitBtn');
            submitBtn.disabled = true;
            submitBtn.innerHTML = 'Submitting...';
        });

        $('#approval_status').on('change', function() {
            const selectedValue = $(this).val();

            if (selectedValue === '4') {
                $('#fileInputSection').show();
            } else {
                $('#fileInputSection').hide();
                $('#approval_file').val(''); // Clear file input if hidden
            }
        });

        $('#payment_received_on').datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true
        });

    });
</script>

</body>

</html>