@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Section Groups</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/home">Home</a></li>
                    <li class="breadcrumb-item"><a href="/{{ $alias }}/tdx/global-config">TDS Global Config</a></li>
                    <li class="breadcrumb-item active">Section Groups</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section id="tdx-section-groups">
        <div class="row">
            <div class="col-12">
                @if(session('status'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <div class="alert-body">{{ session('status') }}</div>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom p-1">
                        <div class="head-label">
                            <h6 class="mb-0">All Section Groups</h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <div class="form-label-group me-2">
                                    <form>
                                        <input type="text" name="search" placeholder="Search" id="search"
                                            class="form-control" value="{{ request('search') }}">
                                    </form>
                                </div>
                                <button class="dt-button btn btn-primary btn-sm me-2" type="button"
                                    data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">
                                    <i data-feather='filter'></i>
                                </button>
                                <a href="/{{ $alias }}/tdx/section-groups/create" class="btn btn-success btn-sm">
                                    <i data-feather="plus"></i> Add Group
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Code</th>
                                    <th>Name</th>
                                    <th>Group Limit (&#8377;)</th>
                                    <th>Sections</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($sections as $index => $group)
                                    <tr>
                                        <td>{{ $sections->firstItem() + $index }}</td>
                                        <td><strong>{{ $group->code }}</strong></td>
                                        <td>{{ $group->name }}</td>
                                        <td>{{ $group->group_limit > 0 ? '₹ ' . number_format($group->group_limit, 0) : 'No Cap' }}</td>
                                        <td><span class="badge badge-light-info">{{ $group->sections_count }}</span></td>
                                        <td>
                                            <span class="badge badge-light-{{ $group->status === 'active' ? 'success' : 'danger' }}">
                                                {{ ucfirst($group->status) }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="d-flex">
                                                <a href="/{{ $alias }}/tdx/section-groups/{{ $group->id }}/edit"
                                                   class="btn btn-sm btn-outline-primary me-50" title="Edit">
                                                    <i data-feather="edit-2" class="font-small-4"></i>
                                                </a>
                                                <a class="btn btn-sm btn-outline-danger sa-params"
                                                   href="javascript:void(0);"
                                                   data-id="{{ $group->id }}"
                                                   data-url="/{{ $alias }}/tdx/section-groups/{{ $group->id }}/delete"
                                                   title="Delete">
                                                    <i data-feather="trash-2" class="font-small-4"></i>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-3">
                                            <p class="mb-0 text-muted">No section groups found. Click "Add Group" to create one.</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                    @if($sections->hasPages())
                        <div class="card-footer">{{ $sections->links() }}</div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    {{-- Offcanvas Filter --}}
    <form method="get" id="filter-form">
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
            <div class="offcanvas-header">
                <h5 id="offcanvasEndLabel" class="offcanvas-title">Filter</h5>
                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="form-label">Status</label>
                        <select name="status" class="form-control mb-2">
                            <option value="">All</option>
                            <option value="active" @if(request('status')=='active') selected @endif>Active</option>
                            <option value="inactive" @if(request('status')=='inactive') selected @endif>Inactive</option>
                        </select>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary mt-2 mb-1 d-grid w-100 d-flex justify-content-center"
                    data-bs-dismiss="offcanvas" aria-label="Close">
                    <i data-feather='search' class="me-2"></i>Apply
                </button>
            </div>
        </div>
    </form>
@endsection

@push('footer-script')
    <script src="{{ asset('js/sweetalert.js') }}"></script>
    <script>
        if (typeof feather !== 'undefined') { feather.replace(); }
        $(function() {
            $('body').on('click', '.sa-params', function() {
                var url = $(this).data('url');
                Swal.fire({
                    title: "Are you sure?",
                    text: "This section group will be deleted.",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel"
                }).then(function(result) {
                    if (result.isConfirmed) {
                        $.ajax({
                            type: 'DELETE',
                            url: url,
                            data: { '_token': '{{ csrf_token() }}', '_method': 'DELETE' },
                            success: function(response) {
                                if (response.code == "success") {
                                    Swal.fire({ title: "Success", text: response.message, icon: "success", confirmButtonColor: "#00c292" }).then(function(){ location.reload(); });
                                } else {
                                    Swal.fire({ title: "Error!", text: response.message, icon: "warning", confirmButtonColor: "#DD6B55" });
                                }
                            }
                        });
                    }
                });
            });
        });
    </script>
@endpush