@extends('layouts.layout')

@section('content')

    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <div class="page-title">
                <div class="row">
                    <div class="col-12 col-md-6 order-md-1 order-last">
                        <h3>Slider</h3>
                        <p class="text-subtitle text-muted">For user to check they list</p>
                    </div>
                    <div class="col-12 col-md-6 order-md-2 order-first">
                        <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">Dashboard</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Components -> Slider</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>

            <section id="basic-horizontal-layouts">
                <div class="row match-height">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Add Promotion</h4>
                            </div>
                            <div class="card-content">
                                <div class="card-body">
                                    <form class="form form-horizontal" method="POST" enctype="multipart/form-data"
                                        action="{{ route('promotion.store') }}">
                                        @csrf
                                        <div class="form-body">
                                            <div class="row">
                                                <div class="col-md-4"><label>Title</label></div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" class="form-control" name="title" placeholder="Title"
                                                        required>
                                                </div>

                                                <div class="col-md-4"><label>Description</label></div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" class="form-control" name="descrition"
                                                        placeholder="Description" required>
                                                </div>

                                                <div class="col-md-4"><label>Link</label></div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" class="form-control" name="links" placeholder="Link">
                                                </div>

                                                <div class="col-md-4"><label>Type</label></div>
                                                <div class="col-md-8 form-group">
                                                    <input type="number" class="form-control" name="type" placeholder="Type"
                                                        required>
                                                </div>

                                                <div class="col-md-4"><label>Image</label></div>
                                                <div class="col-md-8 form-group">
                                                    <input type="file" class="form-control" name="image" required>
                                                </div>

                                                <div class="col-sm-12 d-flex justify-content-end mt-3">
                                                    <button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
                                                    <button type="reset"
                                                        class="btn btn-light-secondary me-1 mb-1">Reset</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>






                                    <!-- Display success/error messages -->
                                    @if(session('success'))
                                        <div class="alert alert-success mt-2">{{ session('success') }}</div>
                                    @endif

                                    @if($errors->any())
                                        <div class="alert alert-danger mt-2">
                                            <ul>
                                                @foreach($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Striped rows start -->
            <section class="section">
                <div class="row" id="table-striped">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Slider List</h4>
                            </div>
                            <div class="card-content">
                                <div class="table-responsive position-relative" style="min-height:150px;">
                                    <!-- Spinner overlay -->
                                    <div id="slider-spinner-overlay"
                                        class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-center align-items-center"
                                        style="background: rgba(255,255,255,0.7); z-index:10; opacity:1; transition: opacity 0.5s;">
                                        <div class="spinner-border text-primary" style="width:3rem;height:3rem;"></div>
                                        <p class="mt-2">Loading table...</p>
                                    </div>

                                    <!-- Table (hidden initially, opacity 0 for fade-in) -->
                                    <table class="table table-striped mb-0" id="slider-table"
                                        style="opacity:0; display:none; transition: opacity 0.5s;">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Image</th>
                                                <th>Title</th>
                                                <th>Description</th>
                                                <th>Link</th>
                                                <th>Create Date</th>
                                                <th>Type</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <!-- Rows will be injected here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>


        </div>

        @include('layouts.footer')
    </div>




    <script>
        const apiUrl = "{{ env('KFA_URL') }}/get/promotioin/2";

        async function loadSliderData() {
            const spinnerOverlay = document.getElementById('slider-spinner-overlay');
            const table = document.getElementById('slider-table');
            const tbody = table.querySelector('tbody');

            // Show overlay spinner
            spinnerOverlay.style.display = 'flex';
            spinnerOverlay.style.opacity = 0;
            spinnerOverlay.style.pointerEvents = 'none'; // ✅ ADD THIS
            setTimeout(() => spinnerOverlay.style.display = 'none', 500);
            table.style.display = 'none';
            table.style.opacity = 0;

            try {
                const response = await fetch(apiUrl);
                if (!response.ok) throw new Error('Network response was not ok');

                const data = await response.json();
                tbody.innerHTML = ''; // Clear existing rows

                data.forEach(item => {
                    const row = document.createElement('tr');

                    row.innerHTML = `
                                                                    <td>${item.id}</td>
                                                                    <td>${item.url ? `<img src="${item.url}" alt="Banner" style="height:50px;">` : '-'}</td>
                                                                    <td>${item.title ?? '-'}</td>
                                                                    <td>${item.descrition ?? '-'}</td>
                                                                    <td>${item.link ?? '-'}</td>
                                                                    <td>${item.createDate ?? '-'}</td>
                                                                    <td>${item.type ?? '-'}</td>
                                                                    <td>
                                                                            
                                                                            <button class="btn btn-sm btn-danger delete-btn" onclick="deleteItem(${item.id})" data-id="${item.id}">
                                                                                Delete
                                                                            </button>
                                                                    </td>
                                                                `;

                    tbody.appendChild(row);
                });

                // Fade-in table
                table.style.display = 'table';
                setTimeout(() => table.style.opacity = 1, 50);

                // Smooth fade-out spinner
                spinnerOverlay.style.opacity = 0;
                setTimeout(() => spinnerOverlay.style.display = 'none', 500); // match transition time

            } catch (error) {
                console.error('Error fetching slider data:', error);
                tbody.innerHTML = `<tr><td colspan="8" class="text-center text-danger">Failed to load data</td></tr>`;

                // Show table even on error
                table.style.display = 'table';
                setTimeout(() => table.style.opacity = 1, 50);

                // Hide spinner
                spinnerOverlay.style.opacity = 0;
                setTimeout(() => spinnerOverlay.style.display = 'none', 500);
            }
        }

        document.addEventListener('DOMContentLoaded', loadSliderData);


        function deleteItem(id) {
            if (!confirm("Are you sure you want to delete this item?")) return;

            fetch(`/delete_slider/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document
                        .querySelector('meta[name="csrf-token"]')
                        .getAttribute('content')
                }
            })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {

                        // ✅ smooth remove (no loop needed)
                        const row = document.querySelector(`#slider-table tbody tr td:first-child`);

                        document.querySelectorAll('#slider-table tbody tr').forEach(tr => {
                            if (tr.children[0].textContent == id) {
                                tr.remove();
                            }
                        });

                    } else {
                        alert(data.message || 'Delete failed');
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Delete error');
                });
        }





    </script>



@endsection