@extends('layouts/layoutMaster')

@section('title', 'Providers')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
@endsection

@section('page-script')
    <script>
        var providerDt = null;

        function applyFilters() {
            providerDt.draw();
            updateFilterBadge();
            bootstrap.Offcanvas.getInstance(document.getElementById('providerFilters'))?.hide();
        }

        function resetFilters() {
            $('#filter-status').val('');
            $('#filter-moderators').val('');
            providerDt.draw();
            updateFilterBadge();
        }

        function getActiveFilterCount() {
            var count = 0;
            if ($('#filter-status').val() !== '') count++;
            if ($('#filter-moderators').val() !== '') count++;
            return count;
        }

        function updateFilterBadge() {
            var count = getActiveFilterCount();
            var $badge = $('#filter-count-badge');
            if (count > 0) {
                $badge.text(count).removeClass('d-none');
            } else {
                $badge.addClass('d-none');
            }
        }

        $(function() {
            providerDt = $('#provider-dt').DataTable({
                ordering: false,
                pageLength: 25,
                columnDefs: [{ orderable: false, searchable: false, targets: -1 }],
                language: {
                    emptyTable: 'No providers found.',
                    zeroRecords: 'No matching providers found.'
                }
            });

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                if (settings.nTable.id !== 'provider-dt') return true;

                var statusFilter = $('#filter-status').val();
                var modFilter = $('#filter-moderators').val();

                if (statusFilter !== '') {
                    var statusText = data[8].trim();
                    if (statusFilter === '1' && statusText !== 'Active') return false;
                    if (statusFilter === '0' && statusText !== 'Inactive') return false;
                }

                if (modFilter !== '') {
                    var modText = data[7].trim();
                    if (modFilter === '1' && modText !== 'Yes') return false;
                    if (modFilter === '0' && modText !== 'No') return false;
                }

                return true;
            });
        });
    </script>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">Providers</h4>
                    <p class="text-muted mb-0">Manage Salihin business entities registered as service providers.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Providers</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row mb-4 g-3">
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar avatar-sm me-2">
                            <span class="avatar-initial rounded bg-label-primary"><i class="ti ti-building ti-sm"></i></span>
                        </div>
                        <h4 class="mb-0 fw-bold">{{ $stats['total'] }}</h4>
                    </div>
                    <p class="text-muted mb-0">Total Providers</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar avatar-sm me-2">
                            <span class="avatar-initial rounded bg-label-success"><i class="ti ti-circle-check ti-sm"></i></span>
                        </div>
                        <h4 class="mb-0 fw-bold">{{ $stats['active'] }}</h4>
                    </div>
                    <p class="text-muted mb-0">Active Providers</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar avatar-sm me-2">
                            <span class="avatar-initial rounded bg-label-warning"><i class="ti ti-user-star ti-sm"></i></span>
                        </div>
                        <h4 class="mb-0 fw-bold">{{ $stats['heads'] }}</h4>
                    </div>
                    <p class="text-muted mb-0">Assigned Heads</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-2">
                        <div class="avatar avatar-sm me-2">
                            <span class="avatar-initial rounded bg-label-info"><i class="ti ti-users ti-sm"></i></span>
                        </div>
                        <h4 class="mb-0 fw-bold">{{ $stats['moderators'] }}</h4>
                    </div>
                    <p class="text-muted mb-0">Assigned Moderators</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                <div>
                    <h5 class="card-title mb-0">All Providers</h5>
                    <small class="text-muted">Business entities providing services on the portal.</small>
                </div>
                <button type="button" class="btn btn-sm btn-icon btn-outline-primary position-relative" style="overflow: visible;" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Filters" onclick="new bootstrap.Offcanvas(document.getElementById('providerFilters')).show()">
                    <i class="ti ti-filter"></i>
                    <span id="filter-count-badge" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger d-none" style="font-size: 0.6rem; min-width: 18px; padding: 0.25em 0.4em; line-height: 1;"></span>
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table id="provider-dt" class="table border-top">
                <thead>
                    <tr>
                        <th>Provider Name</th>
                        <th>Code</th>
                        <th>Currency</th>
                        <th>Heads</th>
                        <th>Moderators</th>
                        <th>Departments</th>
                        <th>Personnel</th>
                        <th>Default Moderators</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($providers as $p)
                        <tr>
                            <td><a href="{{ url('providers/' . $p->uuid) }}" class="fw-medium text-body">{{ $p->display_name }}</a></td>
                            <td><span class="text-muted">{{ $p->code_name }}</span></td>
                            <td><span class="text-muted">{{ $p->qb_currency }}</span></td>
                            <td>{{ $p->heads_count }}</td>
                            <td>{{ $p->moderators_count }}</td>
                            <td>{{ $p->dept_count }}</td>
                            <td>{{ $p->user_count }}</td>
                            <td>{{ $p->using_default_moderators ? 'Yes' : 'No' }}</td>
                            <td>
                                @if ($p->status == 1)
                                    <span class="badge bg-label-success">Active</span>
                                @else
                                    <span class="badge bg-label-secondary">Inactive</span>
                                @endif
                            </td>
                            <td class="text-nowrap">
                                <a href="{{ url('providers/' . $p->uuid) }}" class="btn btn-sm btn-icon btn-text-primary" title="View"><i class="ti ti-eye"></i></a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="providerFilters" aria-labelledby="providerFiltersLabel">
        <div class="offcanvas-header border-bottom">
            <h5 id="providerFiltersLabel" class="offcanvas-title">Filters</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <div class="mb-4">
                <label class="form-label fw-semibold">Status</label>
                <select class="form-select" id="filter-status">
                    <option value="">All Statuses</option>
                    <option value="1">Active</option>
                    <option value="0">Inactive</option>
                </select>
            </div>
            <hr class="my-3">
            <div class="mb-4">
                <label class="form-label fw-semibold">Default Moderators</label>
                <select class="form-select" id="filter-moderators">
                    <option value="">All</option>
                    <option value="1">Using Default</option>
                    <option value="0">Custom Moderators</option>
                </select>
            </div>
        </div>
        <div class="offcanvas-footer border-top p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-primary flex-grow-1" onclick="applyFilters()">
                    Apply Filters
                </button>
                <button type="button" class="btn btn-outline-secondary" onclick="resetFilters()">
                    Reset
                </button>
            </div>
        </div>
    </div>
@endsection