@extends('admin.layouts.app')

@section('title', 'Edit Species Survey')

@section('content')
<div class="main-content app-content mt-0">
    <div class="side-app">
        <div class="main-container container-fluid">
            <div class="page-header">
                <h1 class="page-title">Edit Species Survey</h1>
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('admin.species-surveys.index') }}">Species Surveys</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Survey</li>
                    </ol>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-8 col-lg-12 col-md-12">
                    <div class="card bg-white shadow-sm border-0 br-7">
                        <div class="card-header border-bottom">
                            <h3 class="card-title">Survey Details</h3>
                        </div>
                        <form action="{{ route('admin.species-surveys.update', $speciesSurvey->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="card-body">
                                @if($errors->any())
                                    <div class="alert alert-danger mb-4">
                                        <ul class="mb-0">
                                            @foreach($errors->all() as $error)
                                                <li>{{ $error }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif

                                <div class="row">
                                    <!-- Species Name -->
                                    <div class="col-md-12 mb-3">
                                        <label for="species_id_select" class="form-label">Species Name</label>
                                        <select class="form-control form-select select2-show-search @error('species_name') is-invalid @enderror" id="species_id_select" name="species_id_select" required>
                                            <option value="">Select Species</option>
                                            @foreach($speciesList as $sp)
                                                <option value="{{ $sp->id }}" data-name="{{ $sp->name }}" @selected(old('species_id', $speciesSurvey->species_id) == $sp->id || old('species_name', $speciesSurvey->species_name) == $sp->name)>
                                                    {{ $sp->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="species_name" id="species_name" value="{{ old('species_name', $speciesSurvey->species_name) }}">
                                        <input type="hidden" name="species_id" id="species_id" value="{{ old('species_id', $speciesSurvey->species_id) }}">
                                    </div>

                                    <!-- User Select -->
                                    <div class="col-md-6 mb-3">
                                        <label for="user_id" class="form-label">Mobile User</label>
                                        <select class="form-control form-select select2-show-search @error('user_id') is-invalid @enderror" id="user_id" name="user_id" required>
                                            <option value="">Select User</option>
                                            @foreach($users as $user)
                                                <option value="{{ $user->id }}" @selected(old('user_id', $speciesSurvey->user_id) == $user->id)>
                                                    {{ $user->name }} ({{ $user->email }})
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Gear Name -->
                                    <div class="col-md-6 mb-3">
                                        <label for="gear_name" class="form-label">Gear Name</label>
                                        <input type="text" class="form-control @error('gear_name') is-invalid @enderror" id="gear_name" name="gear_name" value="{{ old('gear_name', $speciesSurvey->gear_name) }}" required>
                                    </div>

                                    <!-- State Select -->
                                    <div class="col-md-6 mb-3">
                                        <label for="state_id" class="form-label">State</label>
                                        <select class="form-control form-select select2-show-search @error('state_id') is-invalid @enderror" id="state_id" name="state_id" required>
                                            <option value="">Select State</option>
                                            @foreach($states as $state)
                                                <option value="{{ $state->id }}" @selected(old('state_id', $speciesSurvey->state_id) == $state->id)>
                                                    {{ $state->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <!-- Landing Center Name -->
                                    <div class="col-md-6 mb-3">
                                        <label for="landing_center_id_select" class="form-label">Landing Center Name</label>
                                        <select class="form-control form-select select2-show-search @error('landing_center_name') is-invalid @enderror" id="landing_center_id_select" name="landing_center_id_select" required>
                                            <option value="">Select Landing Center</option>
                                            @foreach($landingCenters as $lc)
                                                <option value="{{ $lc->id }}" data-state-id="{{ $lc->state_id }}" data-name="{{ $lc->name }}" @selected(old('landing_center_id', $speciesSurvey->landing_center_id) == $lc->id || old('landing_center_name', $speciesSurvey->landing_center_name) == $lc->name)>
                                                    {{ $lc->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="landing_center_name" id="landing_center_name" value="{{ old('landing_center_name', $speciesSurvey->landing_center_name) }}">
                                        <input type="hidden" name="landing_center_id" id="landing_center_id" value="{{ old('landing_center_id', $speciesSurvey->landing_center_id) }}">
                                    </div>

                                    <!-- Image Upload -->
                                    <div class="col-12 mb-3">
                                        <label for="image" class="form-label">Replace Survey Image</label>
                                        <input type="file" class="form-control @error('image') is-invalid @enderror" id="image" name="image" accept="image/*">
                                        <div class="form-text text-muted">Leave empty to keep the current image. Max size: 2MB.</div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer text-end border-top-0">
                                <a href="{{ route('admin.species-surveys.index') }}" class="btn btn-light my-1 me-2 px-4">Cancel</a>
                                <button type="submit" class="btn btn-primary my-1 px-4">Save Changes</button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Side card showing preview of existing image -->
                <div class="col-xl-4 col-lg-12 col-md-12">
                    <div class="card bg-white shadow-sm border-0 br-7">
                        <div class="card-header border-bottom">
                            <h3 class="card-title">Current Image</h3>
                        </div>
                        <div class="card-body text-center">
                            @if($speciesSurvey->image_url)
                                <div class="mb-3 p-2 border rounded-3 bg-light d-flex align-items-center justify-content-center" style="min-height: 200px;">
                                    <img src="{{ $speciesSurvey->image_url }}" alt="Survey Image" class="img-fluid shadow-sm" style="max-height: 250px; object-fit: cover; border-radius: 6px;">
                                </div>
                                <div class="text-muted small">
                                    <div class="mb-1"><strong>Filename:</strong> <code class="px-2 py-1 bg-light rounded text-dark fs-11">{{ $speciesSurvey->image }}</code></div>
                                    <div><strong>Uploaded At:</strong> {{ $speciesSurvey->updated_at->format('d M Y, h:i A') }}</div>
                                </div>
                            @else
                                <div class="p-5 bg-light rounded text-center border text-muted">
                                    <i class="fe fe-image fs-40 d-block mb-2 text-muted"></i>
                                    No image uploaded
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // Store all landing center options dynamically
        var allLandingCenters = [];
        $('#landing_center_id_select option').each(function() {
            var option = $(this);
            if (option.val() !== "") {
                allLandingCenters.push({
                    id: option.val(),
                    name: option.data('name'),
                    stateId: option.data('state-id')
                });
            }
        });

        // Get initial landing center ID
        var initialLandingCenterId = "{{ old('landing_center_id', $speciesSurvey->landing_center_id) }}";

        function filterLandingCenters(stateId, selectedId) {
            var select = $('#landing_center_id_select');
            
            // Destroy Select2 before modifying options
            if (select.hasClass('select2-hidden-accessible')) {
                select.select2('destroy');
            }
            
            select.empty();
            select.append('<option value="">Select Landing Center</option>');
            
            $.each(allLandingCenters, function(index, lc) {
                if (!stateId || lc.stateId == stateId) {
                    var isSelected = (lc.id == selectedId) ? 'selected' : '';
                    select.append('<option value="' + lc.id + '" data-state-id="' + lc.stateId + '" data-name="' + lc.name + '" ' + isSelected + '>' + lc.name + '</option>');
                }
            });
            
            // Re-initialize Select2
            select.select2({
                minimumResultsForSearch: '',
                width: '100%'
            });
            
            // Trigger change event to set names/IDs correctly
            select.trigger('change');
        }

        // On State Change
        $('#state_id').on('change', function() {
            var stateId = $(this).val();
            filterLandingCenters(stateId, null);
        });

        // Initial Filter run
        var initialStateId = $('#state_id').val();
        if (initialStateId) {
            filterLandingCenters(initialStateId, initialLandingCenterId);
        }

        // Handle Species dropdown change
        $('#species_id_select').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var speciesId = $(this).val();
            var speciesName = selectedOption.data('name') || '';

            $('#species_id').val(speciesId);
            $('#species_name').val(speciesName);
        });

        // Handle Landing Center dropdown change
        $('#landing_center_id_select').on('change', function() {
            var selectedOption = $(this).find('option:selected');
            var lcId = $(this).val();
            var lcName = selectedOption.data('name') || '';

            $('#landing_center_id').val(lcId);
            $('#landing_center_name').val(lcName);
        });
    });
</script>
@endsection