@extends('backend.app')

@section('content')
<div class="main-breadcrumb d-flex align-items-center my-3 position-relative">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-14">Manage Doctor's Video</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.posm.videos.index') }}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Manage Doctor's Video</li>
            </ol>
        </nav>
    </div>
</div>
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4>Manage Doctor's Video</h4>
        <div class="d-flex flex-wrap gap-3 ms-auto">
            {{-- Search Box --}}
            <div class="form-icon">
                <input type="text" class="form-control form-control-icon" id="searchBox" placeholder="Search Here ...">
                <i class="ri-search-2-line text-muted"></i>
            </div>

            {{-- Filter by Status --}}
            <div class="dropdown">
                <button class="btn btn-outline-light text-muted dropdown-toggle" type="button" id="filterByDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    Filter By
                </button>
                <ul class="dropdown-menu" aria-labelledby="filterByDropdown">
                    <li><a class="dropdown-item status-filter" data-status="">All</a></li>
                    <li><a class="dropdown-item status-filter" data-status="Active">Active</a></li>
                    <li><a class="dropdown-item status-filter" data-status="Inactive">Inactive</a></li>
                </ul>
            </div>

            {{-- Add New Button --}}
            <a href="{{ route('admin.posm.videos.create') }}" class="btn btn-primary">
                <i class="bi bi-plus-lg me-1"></i> Add New
            </a>
        </div>
    </div>

    <div class="card-body">
        @if(session('success'))
        <div class="alert alert-subtle-success  alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif
        @if(session('error'))
        <div class="alert alert-subtle-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        @endif
        <div class="table-box table-responsive">
            <table class="table table-hover text-nowrap" id="infographicTable">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Video</th>
                        <th>Title</th>
                        <th>Month</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script>
$(document).ready(function () {
    let statusFilter = '';
    let table = $('#infographicTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.posm.videos.index') }}",
            data: function (d) {
                d.status = statusFilter; // Send status filter to server
            }
        },
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'video', name: 'video', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'month', name: 'month' },
            { data: 'status', name: 'status', orderable: false, searchable: true },
            { data: 'action', name: 'action', orderable: false, searchable: false },
        ]
    });

    // 🔍 Search in DataTable
    $('#searchBox').on('keyup', function () {
        table.search(this.value).draw();
    });

    // 📌 Filter by Status
    $('.status-filter').on('click', function () {
        statusFilter = $(this).data('status');
        table.ajax.reload();
    });
});
</script>
@endsection