@extends('layouts.app')
@section('title', 'Funding Sources')

@push('stylesheets')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #fundingSourcesTableCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    #fundingSourcesTableCard .table-responsive table td:last-child { position: relative; white-space: nowrap; }
    #fundingSourcesTableCard .dropdown .dropdown-menu { position: absolute !important; }
    @media (max-width: 768px) {
        #fundingSourcesTableCard .table-responsive { overflow-x: auto; }
    }
</style>
@endpush

@section('contents')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12" id="fundingSourcesTableCard">
                    <x-table-filter-card
                        action="{{ route('funding-sources.index') }}"
                        id="fundingSourceFilterForm"
                        :resetUrl="route('funding-sources.index')"
                    >
                        <div class="pms-filter-field">
                            <label for="filter-search">Search</label>
                            <input type="text" name="search" id="filter-search" class="form-control form-control-sm"
                                   placeholder="Search…" value="{{ $search }}">
                        </div>
                    </x-table-filter-card>

                    <x-active-filter-chips :chips="$activeChips" :totalCount="$fundingSources->total()" />

                    <x-layouts.index-card
                        :createRoute="can('funding_source', 'add') ? route('funding-sources.create') : null"
                        tableHeading="Funding Sources"
                        createLabel="Add Funding Source"
                        :headers="['Name', 'Status', 'Created At']"
                        :perPageSlot="view('components.per-page-selector', ['current' => $perPage, 'baseUrl' => route('funding-sources.index')])"
                        :sortColumns="[null, 'funding_sources.status', 'funding_sources.created_at']"
                        :pagination="$fundingSources->links('vendor.pagination.bootstrap-4')">
                        @forelse ($fundingSources as $fs)
                            <tr>
                                <td>
                                    <x-details-modal-with-actions
                                        as="trigger"
                                        modalId="fundingSourceDetailsModal"
                                        :detailsUrl="route('funding-sources.show', $fs->id)"
                                        :entityId="$fs->id"
                                        :entityName="$fs->name ?? 'Funding Source'"
                                        :editUrl="route('funding-sources.edit', $fs->id)"
                                        :deleteUrl="route('funding-sources.destroy', $fs->id)"
                                    >
                                        {{ $fs->name }}
                                    </x-details-modal-with-actions>
                                </td>
                                <td>
                                    @if($fs->status)
                                        <span class="badge badge-success">Active</span>
                                    @else
                                        <span class="badge badge-secondary">Inactive</span>
                                    @endif
                                </td>
                                <td>{{ $fs->created_at->format('d M Y') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3">
                                    <x-table-empty-state
                                        :state="request()->anyFilled(['search']) ? 'no-results' : 'empty'"
                                        :createRoute="can('funding_source', 'add') ? route('funding-sources.create') : null"
                                        createLabel="Add Funding Source"
                                        :resetUrl="route('funding-sources.index')"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </x-layouts.index-card>
                </div>
            </div>
        </div>
    </section>

    <x-details-modal-with-actions
        modalId="fundingSourceDetailsModal"
        entityLabel="Funding Source"
        historyTarget="#versionHistoryModal"
        form="funding_source"
        formKey="funding_source"
    />

    <x-version-history-modal form="funding_source" entityLabel="Funding Source" />
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
    $(function () {
        PmsIndexDataTable.initLaravelPaginated('#example1');
        PmsIndexDataTable.attachServerSort('#example1', {
            baseUrl: '{{ route("funding-sources.index") }}',
            currentQuery: @json(request()->except(['page']) + ['sort_col' => $sort['col'], 'sort_dir' => $sort['dir']]),
            currentSortCol: '{{ $sort["col"] }}',
            currentSortDir: '{{ $sort["dir"] }}'
        });

        $(document).on('click', '.action-dropdown-delete, .btn-details-modal-delete', function(e) {
            e.preventDefault();
            var form = $(this).closest('form');
            if (!form.length) return;
            Swal.fire({
                title: 'Are you sure?',
                text: 'Are you sure you want to delete this funding source? You will not be able to revert this!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then(function(result) {
                if (result.isConfirmed) form.submit();
            });
        });
    });
</script>
@endpush