@extends('backend.layouts.app')
@section('title')
    All Slider List
@endsection

@push('style')
    <style>
        .slider-card {
            position: relative;
            border-radius: 12px;
            overflow: hidden;
            height: 260px;
            background: #f3f3f3;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            transition: 0.3s ease-in-out;
        }

        .slider-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        }

        .slider-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .status-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            padding: 5px 14px;
            font-size: 13px;
            font-weight: 600;
            border-radius: 6px;
            color: #fff;
            z-index: 20;
        }

        .status-active {
            background: #198754;
        }

        .status-inactive {
            background: #dc3545;
        }

        .action-buttons {
            position: absolute;
            top: 12px;
            right: 12px;
            display: flex;
            gap: 8px;
            z-index: 20;
        }

        .icon-btn {
            width: 38px;
            height: 38px;
            background: rgba(0, 0, 0, 0.55);
            border-radius: 10px;
            border: none;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            color: white;
            transition: 0.25s ease;
        }

        .icon-btn:hover {
            background: #0d6efd;
        }

        .delete-btn:hover {
            background: #dc3545;
        }

        .order-badge {
            position: absolute;
            bottom: 12px;
            left: 12px;
            background: #050E3C;
            color: white;
            padding: 4px 10px;
            font-size: 13px;
            font-weight: 800;
            border-radius: 6px;
            z-index: 20;
        }
    </style>
@endpush


@section('content')
    <div class="row">
        <div class="col-12">

            <div class="card">
                <div class="card-body">

                    <h5 class="card-header">All Slider List</h5>

                    <div class="row mb-3">
                        <div class="col-sm-12 d-flex justify-content-end gap-2">
                            <button class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#addSliderModal">
                                <i class="bx bx-plus"></i> Add New Slider
                            </button>
                        </div>
                    </div>

                    <div class="row">
                        @foreach ($sliders as $slider)
                            <div class="col-4 mb-5">
                                <div class="slider-card">

                                    <span
                                        class="status-badge {{ $slider->is_active ? 'status-active' : 'status-inactive' }}">
                                        {{ $slider->is_active ? 'Active' : 'Inactive' }}
                                    </span>

                                    <span class="order-badge">
                                        {{ $slider->sort_order }}
                                    </span>


                                    <img src="{{ asset($slider->image) }}" alt="image">



                                    <div class="action-buttons">
                                        <!-- Edit Button -->
                                        <button class="icon-btn edit-btn" data-id="{{ $slider->id }}"
                                            data-title="{{ $slider->title }}" data-image="{{ asset($slider->image) }}"
                                            data-status="{{ $slider->is_active }}"
                                            data-current="{{ $slider->current_order }}"
                                            data-used='@json($slider->used_orders)' data-max="{{ $slider->max_order }}"
                                            data-bs-toggle="modal" data-bs-target="#editSliderModal">
                                            <i class="bx bx-edit-alt"></i>
                                        </button>


                                        <!-- Delete Button -->
                                        <form method="POST" action="{{ route('admin.sliders.destroy', $slider->id) }}"
                                            class="deleteForm">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="icon-btn delete-btn">
                                                <i class="bx bx-trash"></i>
                                            </button>
                                        </form>
                                    </div>


                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="mt-3">
                        {{ $sliders->links() }}
                    </div>

                </div>
            </div>

        </div>
    </div>


    <div class="modal fade" id="addSliderModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <form action="{{ route('admin.sliders.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-header">
                        <h5 class="modal-title">Add Slider</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <label class="form-label">Title<span class="text-danger">*</span></label>
                        <input type="text" name="title" placeholder="Enter title"
                            class="mb-3 form-control @error('title') is-invalid @enderror" >

                        @error('title')
                            <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                        @enderror
                        <label class="form-label">Slider Image<span class="text-danger">*</span></label>
                        <input type="file" name="image"
                            class="form-control @error('image')
                                is-invalid
                                @enderror"
                            required>
                        @error('image')
                            <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                        @enderror
                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>

                </form>

            </div>
        </div>
    </div>


    <div class="modal fade" id="editSliderModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">

                <form id="editSliderForm" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div class="modal-header">
                        <h5 class="modal-title">Edit Slider</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <input type="hidden" id="edit_slider_id" name="id">

                        <label class="form-label">Title</label>
                        <input type="text" name="title" id="edit_title" placeholder="Enter title"
                            class="mb-3 form-control">

                        <label class="form-label">Slider Image</label>
                        <input type="file" name="image" class="form-control">

                        <img id="edit_previewImage" src="" class="mt-3 rounded" width="100%">

                        <label class="form-label mt-3">Status</label>
                        <select name="status" id="edit_slider_status" class="form-control">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                        <label class="form-label mt-3">Order</label>
                        <select name="sort_order" id="edit_sort_order" class="form-select form-select-sm">
                        </select>



                    </div>

                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Save</button>
                    </div>

                </form>

            </div>
        </div>
    </div>
@endsection


@push('script')
    <script>
$('.edit-btn').on('click', function () {

    let id = $(this).data('id');
    let title = $(this).data('title');
    let image = $(this).data('image');
    let status = $(this).data('status');

    let current = Number($(this).data('current'));
    let used = $(this).data('used') || [];
    used = used.map(Number);
    let max = Number($(this).data('max'));

    $('#edit_slider_id').val(id);
    $('#edit_title').val(title);
    $('#edit_slider_status').val(status);
    $('#edit_previewImage').attr('src', image);
    $('#editSliderForm').attr('action', '/admin/sliders/' + id);

    let select = $('#edit_sort_order');
    select.empty();

    select.append(`
        <option value="${current}" selected style="background:#cce5ff;font-weight:bold">
            ${current} (Current)
        </option>
    `);

    for (let i = 1; i <= max; i++) {

        if (i === current) continue;

        if (used.includes(i)) {
            select.append(`
                <option disabled style="background:#ffdddd;color:#666">
                    ${i} (Used)
                </option>
            `);
        } else {
            select.append(`
                <option value="${i}" style="background:#eaffea">
                    ${i} (Available)
                </option>
            `);
        }
    }
});


        $('.deleteForm').on('submit', function(e) {
            e.preventDefault();
            let form = this;

            Swal.fire({
                title: "Are you sure?",
                text: "You want to delete this slider!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Yes, Delete!"
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
    </script>
@endpush