@extends('master')
@section('style')
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <style>
        .slider-thumb {
            width: 120px;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            border-radius: 6px;
        }
    </style>
@endsection
@section('content')

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header">
                    <h5 class="modal-title">Konfirmasi Hapus</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Yakin mau menghapus data ini? Tindakan ini tidak bisa dibatalkan.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">Ya, Hapus</button>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-4"></div>
    <div class="container-fluid px-4  mb-4">
        <div class="row justify-content-between">
            <div class="col">
                <div style="font-size: 14px" class="breadcrumb-item">Aplikasi / <span>Slider</span></div>
            </div>
        </div>
    </div>
    <div class="body grow bg-light">
        <div class="container-lg px-4 py-4">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <a href="{{route('application.slider.create')}}" class="btn btn-primary shadow-sm">
                    Tambah Slider
                </a>
            </div>
            <div class="card border-0 bg-white shadow-sm">
                <div class="card-body p-0">
                    <div class="p-4 border-bottom bg-white">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-2 col-lg-2">
                                <label for="dLength" class="mb-2">
                                    Show Entries
                                </label>
                                <select id="dLength" class="form-select">
                                    <option value="10">10</option>
                                    <option value="25">25</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                            </div>

                            <div class="col-md-4 col-lg-5">
                                <label for="search" class="mb-2">
                                    Search
                                </label>
                                <div class="input-group">

                                    <input class="form-control "
                                           id="search"
                                           name="search"
                                           type="search"
                                           placeholder="Search by username or role...">
                                </div>
                            </div>

                            <div class="col-md-auto col-lg-auto">
                                <div class="d-flex gap-2">
                                    <button id="filterToggleBtn"
                                            class="btn btn-primary flex-fill d-flex align-items-center justify-content-center gap-2"
                                            type="button">
                                        <i class="bi bi-funnel"></i>
                                        <span>Custom Filter</span>
                                        <i class="bi bi-chevron-down rotate-icon"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="customFilterBox" class="filter-box">
                            <div class="row g-3 align-items-end mt-1">
                                <div class="col-md-2 col-lg-2">
                                    <label for="sortBy" class="mb-2">
                                        Sort Field
                                    </label>
                                    <select id="sortBy" class="form-select form-select-lg shadow-none border">
                                        <option value="name">Name</option>
                                        <option selected value="created_at">Created At</option>
                                    </select>
                                </div>

                                <div class="col-md-2 col-lg-2">
                                    <label for="sortDir" class="mb-2">
                                        Sorting
                                    </label>
                                    <select id="sortDir" class="form-select form-select-lg shadow-none border">
                                        <option value="asc">ASC</option>
                                        <option selected value="desc">DESC</option>
                                    </select>
                                </div>

                            </div>
                        </div>

                    </div>
                    <div class="p-4">
                        <div class="">
                            <table class="table border align-middle mb-0" id="empTable">
                                <thead>
                                <tr>
                                    <th class="bg-light text-muted border-0" style="width: 80px;">No</th>
                                    <th class="bg-light text-muted border-0">
                                        Judul
                                    </th>
                                    <th class="bg-light text-muted border-0">
                                        Foto
                                    </th>
                                    <th class="bg-light text-muted border-0">
                                        Status
                                    </th>
                                    <th class="bg-light text-muted border-0" style="width: 150px;">
                                        Actions
                                    </th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mt-4 pt-3 border-top">
                            <div class="text-muted small">
                                Showing <span class="fw-semibold" id="start">1</span> to
                                <span class="fw-semibold" id="end">10</span> of
                                <span class="fw-semibold" id="total">100</span> entries
                            </div>
                            <nav aria-label="Table pagination">
                                <ul class="pagination pagination-sm mb-0" id="custom-pagination">

                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

@endsection

@section('script')
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const tableUrl = "{{ route('slider.query') }}"

    </script>
    <script src="{{asset('assets/custom/js/slider.js')}}"></script>

@endsection