@extends('layouts.app')
@section('title', __('applications.title'))

@section('content')
<div class="card shadow-sm mb-3">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="bi bi-folder2-open me-1"></i> {{ __('applications.filters') }}</span>
        <button type="button" id="filters-reset" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-counterclockwise"></i> {{ __('applications.reset') }}
        </button>
    </div>
    <div class="card-body">
        <div class="row g-2">
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.finance_product') }}</label>
                <select id="f-product" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    @foreach($products as $p)
                        <option value="{{ $p->id }}">{{ $p->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.status') }}</label>
                <select id="f-status" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    @foreach($statuses as $s)
                        <option value="{{ $s->code }}">{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.stage') }}</label>
                <select id="f-stage" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    @foreach($stageGroups as $g)
                        <option value="{{ $g }}">{{ __('applications.stage_groups.' . $g) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.funding_entity') }}</label>
                <select id="f-funding" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    @foreach($fundingEntities as $fe)
                        <option value="{{ $fe->id }}">{{ $fe->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.assignee') }}</label>
                <select id="f-assignee" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    @foreach($officers as $o)
                        <option value="{{ $o->id }}">{{ $o->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">{{ __('applications.filter.date_from') }}</label>
                <input type="date" id="f-date-from" class="form-control form-control-sm">
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">{{ __('applications.filter.date_to') }}</label>
                <input type="date" id="f-date-to" class="form-control form-control-sm">
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.has_missing_documents') }}</label>
                <select id="f-missing" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    <option value="1">{{ __('applications.filter.yes') }}</option>
                    <option value="0">{{ __('applications.filter.no') }}</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label small mb-1">{{ __('applications.filter.sent_to_funding') }}</label>
                <select id="f-sent" class="form-select form-select-sm">
                    <option value="">{{ __('applications.filter.all') }}</option>
                    <option value="1">{{ __('applications.filter.yes') }}</option>
                    <option value="0">{{ __('applications.filter.no') }}</option>
                </select>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="bi bi-table me-1"></i> {{ __('applications.list') }}</span>
        @can('applications.create')
            <a href="{{ route('applications.create') }}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg"></i> {{ __('app.create') }}
            </a>
        @endcan
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped align-middle w-100" id="applications-table">
                <thead class="table-light">
                    <tr>
                        <th>{{ __('applications.columns.application_number') }}</th>
                        <th>{{ __('applications.columns.applicant_name') }}</th>
                        <th>{{ __('applications.columns.applicant_phone') }}</th>
                        <th>{{ __('applications.columns.finance_product') }}</th>
                        <th>{{ __('applications.columns.amount') }}</th>
                        <th>{{ __('applications.columns.stage') }}</th>
                        <th>{{ __('applications.columns.status') }}</th>
                        <th>{{ __('applications.columns.assignee') }}</th>
                        <th>{{ __('applications.columns.funding_entity') }}</th>
                        <th>{{ __('applications.columns.created_at') }}</th>
                        <th>{{ __('applications.columns.updated_at') }}</th>
                        <th>{{ __('applications.columns.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const APP_BASE = "{{ url('applications') }}";
const CSRF     = $('meta[name="csrf-token"]').attr('content');
const T = @json(__('applications.confirm'));

$(function () {
    const table = $('#applications-table').DataTable(Object.assign({}, window.dtDefaults, {
        ajax: {
            url: "{{ route('applications.data') }}",
            // Append the filter values to every server-side request.
            data: function (d) {
                d.finance_product_id   = $('#f-product').val();
                d.status_code          = $('#f-status').val();
                d.stage_group          = $('#f-stage').val();
                d.funding_entity_id    = $('#f-funding').val();
                d.assigned_to          = $('#f-assignee').val();
                d.date_from            = $('#f-date-from').val();
                d.date_to              = $('#f-date-to').val();
                d.has_missing_documents= $('#f-missing').val();
                d.sent_to_funding      = $('#f-sent').val();
            },
        },
        order: [[9, 'desc']], // created_at desc
        columns: [
            { data: 'application_number' },
            { data: 'applicant_name' },
            { data: 'applicant_phone' },
            { data: 'finance_product' },
            { data: 'amount', className: 'text-end' },
            { data: 'stage' },
            { data: 'status' },
            { data: 'assignee' },
            { data: 'funding_entity' },
            { data: 'created_at' },
            { data: 'updated_at' },
            { data: 'actions', orderable: false, searchable: false, className: 'text-center' },
        ],
        // Only these columns are sortable on the server.
        columnDefs: [{ orderable: false, targets: [1, 2, 3, 5, 6, 7, 8, 11] }],
    }));

    // Re-query when any filter changes.
    $('#f-product, #f-status, #f-stage, #f-funding, #f-assignee, #f-date-from, #f-date-to, #f-missing, #f-sent')
        .on('change', () => table.ajax.reload());

    $('#filters-reset').on('click', function () {
        $('#f-product,#f-status,#f-stage,#f-funding,#f-assignee,#f-missing,#f-sent').val('');
        $('#f-date-from,#f-date-to').val('');
        table.ajax.reload();
    });
});

// ---- Submit a hidden form (handles CSRF + method spoofing) ----
function submitForm(action, method, fields) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = action;
    const add = (n, v) => {
        const i = document.createElement('input');
        i.type = 'hidden'; i.name = n; i.value = v; form.appendChild(i);
    };
    add('_token', CSRF);
    if (method !== 'POST') add('_method', method);
    Object.entries(fields || {}).forEach(([k, v]) => add(k, v ?? ''));
    document.body.appendChild(form);
    form.submit();
}

// ---- Workflow action with SweetAlert confirmation ----
function appTransition(id, action, requiresComment, label, color) {
    const url = `${APP_BASE}/${id}/transition`;
    if (requiresComment) {
        Swal.fire({
            title: label,
            input: 'textarea',
            inputLabel: T.comment_label,
            inputAttributes: { 'aria-required': true },
            inputValidator: (v) => (!v || !v.trim()) ? T.comment_required : undefined,
            showCancelButton: true,
            confirmButtonText: T.yes,
            cancelButtonText: T.cancel,
        }).then((r) => {
            if (r.isConfirmed) submitForm(url, 'POST', { action, comment: r.value });
        });
    } else {
        Swal.fire({
            title: T.action_title,
            html: `${T.action_text}<br><strong>${label}</strong>`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: T.yes,
            cancelButtonText: T.cancel,
        }).then((r) => {
            if (r.isConfirmed) submitForm(url, 'POST', { action });
        });
    }
}

// ---- Delete with SweetAlert confirmation ----
function appDelete(id) {
    Swal.fire({
        title: T.delete_title,
        text: T.delete_text,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        confirmButtonText: T.yes,
        cancelButtonText: T.cancel,
    }).then((r) => {
        if (r.isConfirmed) submitForm(`${APP_BASE}/${id}`, 'DELETE', {});
    });
}
</script>
@endpush