@extends('admin.layouts.app')

@section('title', 'Species Surveys')

@section('css')
<style>
    .zoom-container {
        overflow: hidden;
        position: relative;
        border-radius: 6px;
        background-color: #f8f9fa;
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    .zoom-image {
        transition: transform 0.25s ease-out;
        cursor: zoom-in;
        transform-origin: center center;
        max-height: 450px;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    .zoom-image.zoomed {
        transform: scale(2.2);
        cursor: zoom-out;
    }
</style>
@endsection

@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">Species Surveys</h1>
                <div>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Species Surveys</li>
                    </ol>
                </div>
            </div>

            <!-- Filter Card Row -->
            <div class="row">
                <div class="col-12">
                    <div class="card bg-white shadow-sm border-0 br-7 mb-4">
                        <div class="card-header border-bottom">
                            <h3 class="card-title"><i class="fe fe-filter me-2 text-primary"></i>Filter Surveys</h3>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-end">
                                <!-- Date Period Filter -->
                                <div class="col-md-3 mb-3">
                                    <label for="filter_date_period" class="form-label fw-semibold text-muted small">Date Period</label>
                                    <select class="form-control form-select select2" id="filter_date_period">
                                        <option value="">All Time</option>
                                        <option value="today">Today</option>
                                        <option value="yesterday">Yesterday</option>
                                        <option value="last_7_days">Last 7 Days</option>
                                        <option value="last_week">Last Week</option>
                                        <option value="last_30_days">Last 30 Days</option>
                                        <option value="this_month">This Month</option>
                                        <option value="month_to_date">Month to Date</option>
                                        <option value="last_month">Last Month</option>
                                        <option value="this_year">This Year</option>
                                        <option value="custom">Custom Range</option>
                                    </select>
                                </div>
                                <!-- Custom Date Range Container -->
                                <div class="col-md-6 mb-3 d-none" id="custom_date_container">
                                    <div class="row">
                                        <!-- Start Date Filter -->
                                        <div class="col-md-6">
                                            <label for="filter_start_date" class="form-label fw-semibold text-muted small">Start Date</label>
                                            <input type="date" class="form-control" id="filter_start_date">
                                        </div>
                                        <!-- End Date Filter -->
                                        <div class="col-md-6">
                                            <label for="filter_end_date" class="form-label fw-semibold text-muted small">End Date</label>
                                            <input type="date" class="form-control" id="filter_end_date">
                                        </div>
                                    </div>
                                </div>
                                <!-- State Filter -->
                                <div class="col-md-3 mb-3">
                                    <label for="filter_state_id" class="form-label fw-semibold text-muted small">State</label>
                                    <select class="form-control form-select select2-show-search" id="filter_state_id">
                                        <option value="">All States</option>
                                        @foreach($states as $state)
                                            <option value="{{ $state->id }}">{{ $state->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Landing Center Filter -->
                                <div class="col-md-3 mb-3">
                                    <label for="filter_landing_center_id" class="form-label fw-semibold text-muted small">Landing Center</label>
                                    <select class="form-control form-select select2-show-search" id="filter_landing_center_id">
                                        <option value="">All Landing Centers</option>
                                        @foreach($landingCenters as $lc)
                                            <option value="{{ $lc->id }}" data-state-id="{{ $lc->state_id }}" data-name="{{ $lc->name }}">{{ $lc->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Species Filter -->
                                <div class="col-md-3 mb-3">
                                    <label for="filter_species_id" class="form-label fw-semibold text-muted small">Species</label>
                                    <select class="form-control form-select select2-show-search" id="filter_species_id">
                                        <option value="">All Species</option>
                                        @foreach($speciesList as $sp)
                                            <option value="{{ $sp->id }}">{{ $sp->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- User Filter -->
                                <div class="col-md-3 mb-3">
                                    <label for="filter_user_id" class="form-label fw-semibold text-muted small">Mobile User</label>
                                    <select class="form-control form-select select2-show-search" id="filter_user_id">
                                        <option value="">All Users</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}">{{ $user->name }} ({{ $user->email }})</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Action Buttons -->
                                <div class="col mb-3 text-end">
                                    <button type="button" id="btn-reset" class="btn btn-light px-4 me-2"><i class="fe fe-refresh-cw me-1"></i>Reset</button>
                                    <button type="button" id="btn-filter" class="btn btn-primary px-5"><i class="fe fe-filter me-1"></i>Apply Filter</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stats Cards Row -->
            <div class="row">
                <!-- Total Surveys Card -->
                <div class="col-sm-6 col-lg-6 col-md-12 col-xl-4">
                    <div class="card">
                        <div class="row">
                            <div class="col-4">
                                <div class="card-img-absolute circle-icon bg-primary align-items-center text-center box-primary-shadow bradius">
                                    <img src="{{ asset('admin/assets/images/svgs/circle.svg') }}" alt="img" class="card-img-absolute">
                                    <i class="lnr lnr-layers fs-30 text-white mt-4"></i>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="card-body p-4">
                                    <h2 class="mb-2 fw-normal mt-2" id="card-total-surveys">{{ $totalSurveys }}</h2>
                                    <h5 class="fw-normal mb-0">Total Surveys</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- States Surveyed Card -->
                <div class="col-sm-6 col-lg-6 col-md-12 col-xl-4">
                    <div class="card">
                        <div class="row">
                            <div class="col-4">
                                <div class="card-img-absolute circle-icon bg-success align-items-center text-center box-success-shadow bradius">
                                    <img src="{{ asset('admin/assets/images/svgs/circle.svg') }}" alt="img" class="card-img-absolute">
                                    <i class="lnr lnr-map-marker fs-30 text-white mt-4"></i>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="card-body p-4">
                                    <h2 class="mb-2 fw-normal mt-2" id="card-total-states">{{ $totalStates }}</h2>
                                    <h5 class="fw-normal mb-0">States Surveyed</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Landing Centers Card -->
                <div class="col-sm-6 col-lg-6 col-md-12 col-xl-4">
                    <div class="card">
                        <div class="row">
                            <div class="col-4">
                                <div class="card-img-absolute circle-icon bg-warning align-items-center text-center box-warning-shadow bradius">
                                    <img src="{{ asset('admin/assets/images/svgs/circle.svg') }}" alt="img" class="card-img-absolute">
                                    <i class="lnr lnr-home fs-30 text-white mt-4"></i>
                                </div>
                            </div>
                            <div class="col-8">
                                <div class="card-body p-4">
                                    <h2 class="mb-2 fw-normal mt-2" id="card-total-landing-centers">{{ $totalLandingCenters }}</h2>
                                    <h5 class="fw-normal mb-0">Landing Centers</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header border-bottom d-flex justify-content-between align-items-center">
                            <h3 class="card-title">Fish Species Image Database</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                {{ $dataTable->table(['class' => 'table table-bordered text-nowrap border-bottom w-100 align-middle']) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal for viewing survey image -->
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header border-bottom">
                <h5 class="modal-title" id="imageModalLabel">Survey Images</h5>
                <span class="badge bg-primary ms-2 d-none" id="carousel-image-counter" style="font-size: 0.8rem; padding: 0.35em 0.65em;"></span>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center p-4">
                <!-- Bootstrap Carousel for multiple images -->
                <div id="surveyCarousel" class="carousel carousel-dark slide d-none" data-bs-ride="false">
                    <div class="carousel-inner">
                        <!-- Dynamic slides inserted here -->
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#surveyCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon shadow-sm" aria-hidden="true" style="background-color: rgba(255,255,255,0.7); border-radius: 50%; padding: 15px; background-size: 50%;"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#surveyCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon shadow-sm" aria-hidden="true" style="background-color: rgba(255,255,255,0.7); border-radius: 50%; padding: 15px; background-size: 50%;"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
                <div id="noImageText" class="text-muted py-5 d-none">
                    <i class="fe fe-image fs-50 d-block mb-2 text-muted"></i>
                    No image available for this survey.
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    {{ $dataTable->scripts() }}
    <!-- INTERNAL Sweet-Alert js -->
    <script src="{{ asset('admin/assets/plugins/sweet-alert/sweetalert.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            // Store all landing center options dynamically
            var allLandingCenters = [];
            $('#filter_landing_center_id option').each(function() {
                var option = $(this);
                if (option.val() !== "") {
                    allLandingCenters.push({
                        id: option.val(),
                        name: option.data('name'),
                        stateId: option.data('state-id')
                    });
                }
            });

            function filterLandingCenters(stateId) {
                var select = $('#filter_landing_center_id');
                var currentValue = select.val();
                
                // Destroy Select2 before modifying options
                if (select.hasClass('select2-hidden-accessible')) {
                    select.select2('destroy');
                }
                
                select.empty();
                select.append('<option value="">All Landing Centers</option>');
                
                $.each(allLandingCenters, function(index, lc) {
                    if (!stateId || lc.stateId == stateId) {
                        var isSelected = (lc.id == currentValue) ? '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%'
                });
            }

            // On State Change, filter Landing Centers
            $('#filter_state_id').on('change', function() {
                var stateId = $(this).val();
                filterLandingCenters(stateId);
            });

            // Table reload function
            function reloadTable() {
                if (window.LaravelDataTables && window.LaravelDataTables["species-surveys-table"]) {
                    window.LaravelDataTables["species-surveys-table"].ajax.reload();
                } else {
                    $('#species-surveys-table').DataTable().ajax.reload();
                }
            }

            // Toggle custom date range view
            $('#filter_date_period').on('change', function() {
                var period = $(this).val();
                if (period === 'custom') {
                    $('#custom_date_container').removeClass('d-none');
                } else {
                    $('#custom_date_container').addClass('d-none');
                    $('#filter_start_date').val('');
                    $('#filter_end_date').val('');
                }
            });

            // Apply Filter click
            $('#btn-filter').on('click', function(e) {
                e.preventDefault();
                reloadTable();
            });

            // Reset Filter click
            $('#btn-reset').on('click', function(e) {
                e.preventDefault();
                $('#filter_state_id').val('').trigger('change');
                $('#filter_landing_center_id').val('').trigger('change');
                $('#filter_species_id').val('').trigger('change');
                $('#filter_user_id').val('').trigger('change');
                $('#filter_date_period').val('').trigger('change');
                reloadTable();
            });

            // Update stats cards when DataTable reloads/draws with filtered data
            $('#species-surveys-table').on('xhr.dt', function(e, settings, json, xhr) {
                if (json) {
                    $('#card-total-surveys').text(json.totalSurveys !== undefined ? json.totalSurveys : 0);
                    $('#card-total-states').text(json.totalStates !== undefined ? json.totalStates : 0);
                    $('#card-total-landing-centers').text(json.totalLandingCenters !== undefined ? json.totalLandingCenters : 0);
                }
            });

            // View Image Modal Handler
            $(document).on('click', '.view-image-btn', function(e) {
                e.preventDefault();
                var button = $(this);
                var imageUrlsAttr = button.data('image-urls');
                var speciesName = button.data('species-name');

                // Set dynamic title
                $('#imageModalLabel').text(speciesName);

                var carouselInner = $('#surveyCarousel .carousel-inner');
                carouselInner.empty();

                if (imageUrlsAttr && imageUrlsAttr.toString().trim() !== '') {
                    var urls = imageUrlsAttr.toString().split(',');
                    var validUrlsCount = 0;
                    
                    $.each(urls, function(index, url) {
                        url = url.trim();
                        if (url !== '') {
                            var activeClass = validUrlsCount === 0 ? 'active' : '';
                            var itemHtml = '<div class="carousel-item ' + activeClass + '">' +
                                '<div class="zoom-container">' +
                                    '<img src="' + url + '" class="d-block w-100 img-fluid border shadow-sm zoom-image" alt="Survey Image ' + (validUrlsCount + 1) + '">' +
                                '</div>' +
                            '</div>';
                            carouselInner.append(itemHtml);
                            validUrlsCount++;
                        }
                    });

                    if (validUrlsCount > 0) {
                        $('#surveyCarousel').removeClass('d-none');
                        $('#noImageText').addClass('d-none');

                        // Show/hide navigation arrows and counter based on count
                        if (validUrlsCount <= 1) {
                            $('#surveyCarousel .carousel-control-prev, #surveyCarousel .carousel-control-next').addClass('d-none');
                            $('#carousel-image-counter').addClass('d-none');
                        } else {
                            $('#surveyCarousel .carousel-control-prev, #surveyCarousel .carousel-control-next').removeClass('d-none');
                            $('#carousel-image-counter').removeClass('d-none').text('1 of ' + validUrlsCount);
                        }

                        // Re-initialize Bootstrap carousel
                        var myCarousel = document.querySelector('#surveyCarousel');
                        var carousel = bootstrap.Carousel.getOrCreateInstance(myCarousel);
                        carousel.to(0);
                    } else {
                        $('#surveyCarousel').addClass('d-none');
                        $('#carousel-image-counter').addClass('d-none');
                        $('#noImageText').removeClass('d-none');
                    }
                } else {
                    $('#surveyCarousel').addClass('d-none');
                    $('#carousel-image-counter').addClass('d-none');
                    $('#noImageText').removeClass('d-none');
                }
                
                $('#imageModal').modal('show');
            });

            // Update image counter on slide
            $('#surveyCarousel').on('slide.bs.carousel', function(e) {
                var total = $(this).find('.carousel-item').length;
                var current = e.to !== undefined ? e.to + 1 : ($(e.relatedTarget).index() + 1);
                $('#carousel-image-counter').text(current + ' of ' + total);
            });

            // Toggle image zoom
            $(document).on('click', '.zoom-image', function() {
                $(this).toggleClass('zoomed');
                if (!$(this).hasClass('zoomed')) {
                    $(this).css('transform-origin', 'center center');
                }
            });

            // Pan zoomed image on mouse move
            $(document).on('mousemove', '.zoom-image.zoomed', function(e) {
                var container = $(this).parent();
                var offset = container.offset();
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;
                
                var xPercent = (x / container.width()) * 100;
                var yPercent = (y / container.height()) * 100;
                
                $(this).css('transform-origin', xPercent + '% ' + yPercent + '%');
            });

            // Reset zoom when carousel slides or modal is closed
            $('#surveyCarousel').on('slide.bs.carousel', function() {
                $('.zoom-image').removeClass('zoomed').css('transform-origin', 'center center');
            });

            $('#imageModal').on('hidden.bs.modal', function() {
                $('.zoom-image').removeClass('zoomed').css('transform-origin', 'center center');
                $('#carousel-image-counter').addClass('d-none').text('');
            });

            $(document).on('click', '.delete-btn', function() {
                var button = $(this);
                var id = button.data('id');
                var deleteUrl = "{{ route('admin.species-surveys.destroy', ':id') }}".replace(':id', id);

                swal({
                    title: "Are you sure?",
                    text: "You will not be able to recover this survey record!",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "Cancel",
                    closeOnConfirm: false
                }, function(isConfirm) {
                    if (isConfirm) {
                        $.ajax({
                            url: deleteUrl,
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}',
                                _method: 'DELETE'
                            },
                            success: function(response) {
                                if (response.success) {
                                    swal({
                                        title: "Deleted!",
                                        text: response.message,
                                        type: "success",
                                        timer: 1500,
                                        showConfirmButton: false
                                    });
                                    // Reload Yajra DataTable
                                    if (window.LaravelDataTables && window.LaravelDataTables["species-surveys-table"]) {
                                        window.LaravelDataTables["species-surveys-table"].ajax.reload();
                                    } else {
                                        $('#species-surveys-table').DataTable().ajax.reload();
                                    }
                                } else {
                                    swal("Failed!", response.message, "error");
                                }
                            },
                            error: function(xhr) {
                                swal("Failed!", "Something went wrong. Please try again.", "error");
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection