@extends('back.layout.page-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle : 'Page Title Here')
@section('content')

<div class="page-header mb-3">
    <h4>Manage Photos for: {{ $facilities->name }}</h4>
</div>

<div class="card">
    <div class="card-body">
        <form id="photoUploadForm" action="{{ route('admin.facilityPhotos.upload', $facilities->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label for="photos">Upload Photos</label>
                <input type="file" name="photos[]" multiple class="form-control">
                <span class="error-text photos_error text-danger"></span>
            </div>
            <button type="submit" class="btn btn-primary">Upload</button>
        </form>


        <hr>

        @livewire('admin.facilities-photo', ['facilities' => $facilities])
    </div>
</div>
@endsection
@push('scripts')
<script>
    window.addEventListener('deletePhoto', function(event) {
        var id = event.detail[0].id;

        Swal.fire({
            title: 'Are you sure?',
            text: 'You want to delete this photo.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, Delete',
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#d33',
            confirmButtonColor: '#3085d6',
            width: '320px',
            allowOutsideClick: false
        }).then((result) => {
            if (result.isConfirmed) {
                Livewire.dispatch('deletePhotoAction', {
                    id: id
                });
                Livewire.dispatch('refreshPhotos');
            }
        });
    })

    $(document).ready(function() {
        $('#photoUploadForm').submit(function(e) {
            e.preventDefault();
            if (!$("input[name='photos[]']").val()) {
            toastr.error("Please select at least one image.");
            return;
        }
            var form = this;
            var formData = new FormData(form);

            $.ajax({
                url: $(form).attr('action'),
                method: $(form).attr('method'),
                data: formData,
                processData: false,
                contentType: false,
                dataType: 'json',
                beforeSend: function() {
                    $(form).find('span.error-text').text('');
                },
                success: function(data) {
                    if (data.status === 1) {
                        $(form)[0].reset();
                        toastr.success(data.message);

                        Livewire.dispatch('refreshPhotos'); // Reload photo list
                    } else {
                        toastr.error(data.message);
                    }
                },
                error: function(data) {
                    $.each(data.responseJSON.errors, function(prefix, val) {
                        if (prefix.startsWith('photos')) {
                            $(form).find('span.photos_error').text(val[0]);
                        }
                    });
                }
            });
        });
    });
</script>
@endpush