@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <div class="d-flex flex-row align-items-center justify-content-between mb-4 p-3 bg-light rounded shadow-sm"> 
        <div class="d-flex align-items-center">
            <i class="bx bx-plus fs-3" style="color: var(--coffee-brown);"></i>
            <h4 class="mb-0">Add New Advance Request</h4>
        </div>
    </div>

    <div class="card">
        <div class="card-body p-4">
            <form action="{{ route('add.advance.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Select Farmer</label>
                    <div class="col-sm-9">
                        <select class="form-select select2" id="single-select-field" name="id_farmer" required>
                            <option value="">Select a Farmer</option>
                            @foreach ($farmers as $detail)
                                @php
                                    $photoUrl = !empty($detail->farmer_photo) && file_exists(public_path('upload/farmers/'.$detail->farmer_photo)) 
                                                ? url('upload/farmers/'.$detail->farmer_photo) 
                                                : url('upload/no_image.jpg');
                                @endphp
<<<<<<< HEAD
                                <option value="{{ $detail->id_farmer }}" data-photo="{{ $photoUrl }}" {{ old('id_farmer') == $detail->id_farmer ? 'selected' : '' }}>
=======
                                <option value="{{ $detail->id_farmer }}" data-photo="{{ $photoUrl }}" {{ old('id_farmer', $selectedFarmerId ?? null) == $detail->id_farmer ? 'selected' : '' }}>
>>>>>>> origin/main
                                    {{ $detail->farmer_number }} {{ $detail->farmer_fname }} {{ $detail->farmer_lname }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Farmer Photo</label>
                    <div class="col-sm-9">
<<<<<<< HEAD
                        <img id="farmer-photo" src="{{ url('upload/no_image.jpg') }}" alt="Farmer's Photo" class="img-thumbnail" style="max-width: 150px;">
=======
                        <img id="farmer-photo" src="{{ url('upload/no_image.jpg') }}" alt="Farmer's Photo" class="chm-photo-preview-lg">
>>>>>>> origin/main
                    </div>
                </div>

                <!-- Conditional Photo Upload -->
                <div class="row mb-3" id="photo-upload-section" style="display: none;">
                    <label class="col-sm-3 col-form-label">Upload Farmer Photo</label>
                    <div class="col-sm-9">
                        <input type="file" class="form-control" name="farmer_photo" accept="image/*">
                    </div>
                </div>

                <!-- Advance Types Section -->
                <div id="advance-options-container">
                    <div class="row mb-3 advance-option">
                        <label class="col-12 col-sm-3 col-form-label">Advance Type</label>
                        <div class="col-12 col-sm-4">
                            <select class="form-select advance-type" name="advance_type[0]" required>
                                <option value="">Select Advance Type</option>
                                <option value="transport">Transport</option>
                                <option value="advance">Advance</option>
                                <option value="tarpaulin">Tarpaulin</option>
                            </select>
                        </div>
                        <div class="col-12 col-sm-3">
                            <input type="number" name="amount[0]" class="form-control" placeholder="Amount" required />
                        </div>
                        <div class="col-12 col-sm-2 d-flex align-items-center">
                            <button type="button" class="btn add-advance" style="background-color: #6f4f1f; color: white; border-radius: 50%; width: 35px; height: 35px;">
                                &plus;
                            </button>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <label class="col-sm-3 col-form-label">Advance Request Letter</label>
                    <div class="col-sm-9">
                        <input type="file" class="form-control" name="advance_letter" accept=".pdf,.docx,.doc,image/*" required>
                        <small class="form-text text-muted">Accepted formats: PDF, DOCX, DOC, JPG, PNG.</small>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-9 offset-sm-3">
                        <button type="submit" class="btn" style="background-color: #6f4f1f; color: white; padding: 10px 30px;">
                            Submit Request
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if(session('success'))
<script>
    document.addEventListener("DOMContentLoaded", function() {
        Swal.fire({
            title: "Success!",
            text: "{{ session('success') }}",
            icon: "success",
            showCancelButton: true,
            confirmButtonText: "Add More",
            cancelButtonText: "View Advances"
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = "{{ route('add.advance.form') }}";
            } else {
                window.location.href = "{{ route('all.advances') }}";
            }
        });
    });
</script>
@endif

<script>
    $(document).ready(function() {
        $('#single-select-field').select2();

<<<<<<< HEAD
=======
        @if(!empty($selectedFarmerId))
        $('#single-select-field').trigger('change');
        @endif

>>>>>>> origin/main
        // Change farmer photo dynamically
        $('#single-select-field').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var photoUrl = selectedOption.data('photo');
            $('#farmer-photo').attr('src', photoUrl ? photoUrl : "{{ url('upload/no_image.jpg') }}");

            // Show or hide photo upload section based on selected farmer's photo
            if (photoUrl === "{{ url('upload/no_image.jpg') }}") {
                $('#photo-upload-section').show();
            } else {
                $('#photo-upload-section').hide();
            }
        });

        var advanceCount = 1;

        $(document).on('click', '.add-advance', function() {
            if (advanceCount < 3) {
                var newRow = `<div class="row mb-3 advance-option">
                    <label class="col-sm-3 col-form-label">Advance Type</label>
                    <div class="col-sm-4">
                        <select class="form-select advance-type" name="advance_type[${advanceCount}]" required>
                            <option value="">Select Advance Type</option>
                            <option value="transport">Transport</option>
                            <option value="advance">Advance</option>
                            <option value="tarpaulin">Tarpaulin</option>
                        </select>
                    </div>
                    <div class="col-sm-3">
                        <input type="number" name="amount[${advanceCount}]" class="form-control" placeholder="Amount" required />
                    </div>
                    <div class="col-sm-2 d-flex align-items-center">
                        <button type="button" class="btn btn-danger remove-advance" style="border-radius: 50%; width: 35px; height: 35px;">−</button>
                    </div>
                </div>`;

                $('#advance-options-container').append(newRow);
                advanceCount++;
            } else {
                Swal.fire("Maximum Reached", "You can only add up to 3 advance types.", "warning");
            }
        });

        $(document).on('click', '.remove-advance', function() {
            $(this).closest('.advance-option').remove();
            advanceCount--;
        });

        // Prevent duplicate selections
        $(document).on('change', '.advance-type', function() {
            var selectedValues = [];
            var duplicateFound = false;

            $('.advance-type').each(function() {
                var value = $(this).val();
                if (value && selectedValues.includes(value)) {
                    duplicateFound = true;
                    return false;
                }
                selectedValues.push(value);
            });

            if (duplicateFound) {
                Swal.fire("Duplicate Detected", "You cannot select the same advance type more than once.", "warning");
                $(this).val('');
            }
        });
    });
</script>

@endsection