@extends('backend.app')
@section('title', 'Hero Section')
@push('style')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/css/dropify.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <style>
        .thumb {
            width: 220px;
            height: 140px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            object-fit: cover;
        }
        .bg-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }
    </style>
@endpush
@section('content')
    <div class="app-content content ">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title">Hero Section</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.hero.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-2">
                            <label class="form-label">Title <small class="text-muted">(max 200 chars)</small></label>
                            <input type="text" name="title" value="{{ old('title', $hero->title ?? '') }}"
                                class="form-control" maxlength="200" required placeholder="Enter hero title">
                            @error('title')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-2">
                            <label class="form-label">Status</label>
                            <select class="form-control" name="status">
                                <option value="active" {{ ($hero->status ?? 'active') === 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ ($hero->status ?? '') === 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-12 mb-2">
                            <label class="form-label">Short Description <small class="text-muted">(max 400 chars)</small></label>
                            <textarea name="short_description" rows="3" class="form-control" maxlength="400" required placeholder="Write a concise description for the hero section">{{ old('short_description', $hero->short_description ?? '') }}</textarea>
                            @error('short_description')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        @if (!empty($hero?->backgrounds))
                            <div class="col-12 mb-2">
                                <label class="form-label d-block">Existing Backgrounds</label>
                                <div class="bg-grid">
                                    @foreach ($hero->backgrounds as $path)
                                        <div class="mr-2 mb-2 position-relative text-center" data-bg="{{ $path }}">
                                            <img src="{{ asset($path) }}" alt="background" class="thumb mb-1">
                                            <button type="button" class="btn btn-sm btn-danger position-absolute"
                                                style="top: -8px; right: -8px; border-radius: 50%;"
                                                onclick="deleteBackground('{{ $hero->id }}', '{{ $path }}')">
                                                <i class="fa-solid fa-xmark"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="col-12 mb-3">
                            <label class="form-label">Upload Backgrounds (you can add more)</label>
                            <input type="file" name="backgrounds[]" class="form-control dropify" multiple
                                data-allowed-file-extensions="jpeg png jpg webp" />
                            @error('backgrounds')
                                <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                            @error('backgrounds.*')
                                <small class="text-danger d-block">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    <div class="mt-2">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script>
        $('.dropify').dropify();

        function deleteBackground(id, path) {
            Swal.fire({
                title: 'Delete this image?',
                text: 'This background will be removed from the hero slider.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ url('/admin/hero-section') }}/${id}/delete-image`, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({ path })
                        })
                        .then(res => res.json())
                        .then((data) => {
                            if (data.success) {
                                toastr.success('Image deleted');
                                document.querySelector(`[data-bg="${path}"]`)?.remove();
                            } else {
                                toastr.error(data.message || 'Could not delete image');
                            }
                        }).catch(() => toastr.error('Could not delete image'));
                }
            });
        }
    </script>
@endpush