@extends('layouts.app')

@section('title', __('Draft reports'))

@push('stylesheets')
@include('reports.partials.mec-listing-table-styles')
@include('partials.index-datatable-styles')
@include('partials.filter-card-styles')
<style>
    #reportsDraftsCard .table-responsive { overflow-x: visible; overflow-y: visible; }
    @media (max-width: 768px) {
        #reportsDraftsCard .table-responsive { overflow-x: auto; }
    }
    #reportsDraftsCard tbody tr.report-draft-detail-row { cursor: pointer; }
    #reportsDraftsCard .card-header .card-title { min-width: 0; }
</style>
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="card pms-mec-reports-listing-card pms-index-card" id="reportsDraftsCard">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between w-100 gap-2">
                <div class="d-flex flex-wrap align-items-center flex-fill min-width-0 gap-3">
                    <h3 class="card-title mb-0 text-truncate">{{ __('Draft reports') }}</h3>
                    @include('reports.partials.mec-listing-scheme-name-toggle')
                </div>
                @include('reports.partials.new-monitoring-report-button')
            </div>
            <div class="card-body p-3">
                <p class="text-muted small mb-3">
                    {{ __('Saved report drafts for your account. Click a row to continue editing or remove a draft.') }}
                </p>
                <div class="table-responsive">
                    @include('reports.partials.drafts-listing-table', [
                        'tableId' => 'tblReportsDrafts',
                        'draftRows' => $draftRows,
                    ])
                </div>
                @include('partials.listing-pagination', [
                    'paginator' => $paginator ?? null,
                    'perPage' => $perPage ?? 25,
                    'baseUrl' => route('reports.drafts.index'),
                ])
            </div>
        </div>
    </div>

    <div class="modal fade" id="report-draft-detail-modal" tabindex="-1" role="dialog" aria-labelledby="report-draft-detail-modal-title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white" id="report-draft-detail-modal-title">
                        <i class="fas fa-edit mr-2"></i>{{ __('Draft report') }}
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="{{ __('Close') }}">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="report-draft-modal-body" style="min-height: 120px;">
                    <div class="text-center py-4 text-muted">
                        <div class="spinner-border" role="status"><span class="sr-only">{{ __('Loading') }}…</span></div>
                        <p class="mt-2 mb-0">{{ __('Loading') }}…</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ __('Close') }}</button>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('partials.index-datatable-scripts')
<script>
(function () {
    var tableSelector = '#tblReportsDrafts';
    var emptyMsg = @json(__('No drafts yet. Save from the report wizard or pick a scheme to start.'));
    var draftModalBase = @json(rtrim(url('/reports/drafts/modal'), '/'));
    var draftModal = $('#report-draft-detail-modal');
    var draftBodyEl = document.getElementById('report-draft-modal-body');

    function draftModalUrl(draftId) {
        return draftModalBase + '/' + encodeURIComponent(draftId);
    }

    $(function () {
        var $tbl = $(tableSelector);
        if (!$tbl.length || typeof window.PmsIndexDataTable === 'undefined') {
            return;
        }
        if ($.fn.DataTable.isDataTable($tbl)) {
            $tbl.DataTable().destroy();
        }
        $tbl.attr('data-pms-empty-message', emptyMsg);

        PmsIndexDataTable.initLaravelPaginated(tableSelector, {
            scrollX: true
        });

        PmsIndexDataTable.attachServerSort(tableSelector, {
            baseUrl: '{{ request()->url() }}',
            currentQuery: @json(request()->except(['page', 'sort_col', 'sort_dir'])),
            currentSortCol: '{{ request('sort_col', 'updated_order') }}',
            currentSortDir: '{{ request('sort_dir', 'desc') }}'
        });

        $(tableSelector + ' tbody').on('click', 'tr.report-draft-detail-row', function () {
            var draftId = this.getAttribute('data-draft-id');
            if (!draftId || !draftBodyEl) {
                return;
            }
            draftBodyEl.innerHTML = '<div class="text-center py-4 text-muted"><div class="spinner-border" role="status"></div><p class="mt-2 mb-0">{{ __('Loading') }}…</p></div>';
            $.ajax({
                url: draftModalUrl(draftId),
                method: 'GET',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).done(function (html) {
                draftBodyEl.innerHTML = html;
            }).fail(function (xhr) {
                draftBodyEl.innerHTML = '<p class="text-muted text-center py-4 mb-0">{{ __('Failed to load draft.') }} (HTTP ' + (xhr.status || '?') + ').</p>';
            });
            draftModal.modal('show');
        });

        $(document).on('click', '.report-draft-modal-delete-btn', function (e) {
            e.preventDefault();
            e.stopPropagation();
            var form = $(this).closest('form');
            if (!form.length) {
                return;
            }
            var label = String(form.data('draft-label') || '').trim() || @json(__('this draft'));
            Swal.fire({
                title: @json(__('Are you sure?')),
                text: @json(__('Delete draft :label? You will not be able to recover it.')).replace(':label', label),
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: @json(__('Yes, delete it')),
                cancelButtonText: @json(__('Cancel'))
            }).then(function (result) {
                if (result.isConfirmed) {
                    form[0].submit();
                }
            });
        });
    });
})();
</script>
@include('reports.partials.mec-listing-scheme-name-toggle-scripts')
@endpush