@php(
$headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
    '',
    $headerOption['subTitle'] ?? '',
    [],
    [],
    false,
    []
))
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="col-12">
    <div class="project-box">
        {{-- Header Bar --}}
        <div class="text-center p-2 mb-3" style="background:#16C4C0; border-radius:5px;">
            <h5 class="text-white mb-0">Manage Applications</h5>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show">{{ session('error') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
        @endif

        {{-- Instructions --}}
        <div class="mb-3 p-2 d-none" style="background:#f9f9f9; border-radius:5px;">
            <strong>Instructions:</strong>
            <ul class="small mb-0 mt-1">
                <li>To <u>Add</u> a new application, simply click on "Add New Application"</li>
                <li>To <u>Edit</u> the application, click on "Edit"</li>
                <li>To <u>Delete</u> an application and all linked permissions, mappings and attachments, click on "Delete"</li>
                <li>To <u>copy Mapping</u> from existing application, click "Mappings"</li>
                <li>To set <u>Permissions</u> for users, click on "Permissions"</li>
                <li>To <u>reorganize the Order</u> of the applications, simply drag an application container up or down</li>
            </ul>
        </div>

        {{-- Action Buttons --}}
        <div class="d-flex gap-2 mb-3 flex-wrap">
            <a href="{{ route('manages.pdf-mappings.create') }}" class="green-btn-inner waves-effect btn-sm show-modal">
                <i class="bx bx-plus"></i> Add New Application
            </a>
            <a href="{{ route('manages.pdf-template-categories.manage') }}" class="green-btn-inner waves-effect btn-sm show-modal">
                <i class="bx bx-plus"></i> Add New Category
            </a>
        </div>

        {{-- Current Applications --}}
        <h6 class="fw-semibold mb-2">Current Applications:</h6>

        @if($templates->isEmpty())
            <div class="text-center text-muted py-4">
                <i class="bx bx-file bx-lg"></i>
                <p class="mt-2">No applications yet. Click "Add New Application" to get started.</p>
            </div>
        @else
        <div class="sortable-applications">
            @foreach($templates as $template)
            <div class="project-box mb-3 drag-wrapper" data-id="{{ $template->id }}">
                {{-- Card Header --}}
                <div class="d-flex align-items-center p-2 mb-2" style="background:#16C4C0; border-radius:5px;">
                    <img src="{{ asset('img/drag-dot.svg') }}" class="drag-handle me-2" style="cursor:grab; filter:brightness(10);" alt="drag" />
                    <strong class="text-white">{{ $template->name }}</strong>
                </div>

                {{-- Card Body --}}
                <div class="row px-2">
                    <div class="col-md-6">
                        <p class="small mb-1"><strong>File:</strong> {{ $template->file->file_name_original ?? ($template->file->file_name ?? 'N/A') }}</p>
                        <p class="small mb-1"><strong>Mappings:</strong> this application is mapped ({{ $template->mapped_count }} records)</p>
                        <p class="small mb-1"><strong>Visible:</strong> {{ ($template->visible_to ?? 'everyone') == 'everyone' ? 'Everyone' : 'Specific Users' }}</p>
                        <p class="small mb-0"><strong>Type:</strong> {{ ($template->application_type ?? 1) == 2 ? 'eSignature Application' : 'Generic Form' }}</p>
                    </div>
                    <div class="col-md-6 text-end">
                        <p class="small mb-1"><strong>Created:</strong> {{ $template->created_at ? $template->created_at->format('m/d/Y h:ia') : 'N/A' }}</p>
                        <p class="small mb-0"><strong>Last Modified:</strong> {{ $template->updated_at ? $template->updated_at->format('m/d/Y h:ia') : 'N/A' }}</p>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="d-flex gap-2 mt-2 px-2 pb-1 flex-wrap justify-content-end">
                    <form action="{{ route('manages.pdf-mappings.destroy', $template->id) }}" method="POST" class="d-inline delete-app-form">
                        @csrf @method('DELETE')
                        <button type="submit" class="green-btn-inner waves-effect btn-sm"><i class="bx bx-trash"></i> Delete</button>
                    </form>
                    <a href="{{ route('manages.pdf-mappings.permissions', $template->id) }}" class="green-btn-inner waves-effect btn-sm show-modal">
                        <i class="bx bx-lock"></i> Permissions
                    </a>
                    <a href="{{ route('manages.pdf-mappings.show', $template->id) }}" class="green-btn-inner waves-effect btn-sm">
                        <i class="bx bx-map"></i> Mappings
                    </a>
                    <button class="green-btn-inner waves-effect btn-sm btn-upload-pdf" data-id="{{ $template->id }}">
                        <i class="bx bx-upload"></i> Upload
                    </button>
                    <input type="file" class="d-none upload-pdf-input" data-id="{{ $template->id }}" accept=".pdf">
                    <a href="{{ route('manages.pdf-mappings.download-file', $template->id) }}" class="green-btn-inner waves-effect btn-sm">
                        <i class="bx bx-download"></i> Download
                    </a>
                    <a href="{{ route('manages.pdf-mappings.edit', $template->id) }}" class="green-btn-inner waves-effect btn-sm show-modal">
                        <i class="bx bx-edit"></i> Edit
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>
@endsection

@push('page_script')
<script>
(function($) {
    // Delete with confirmDialog
    $(document).on('submit', '.delete-app-form', function(e) {
        e.preventDefault();
        var form = this;
        confirmDialog({
            title: 'Delete Application',
            text: 'Are you sure you want to delete this application? This will remove all linked permissions, mappings and attachments.',
            icon: 'warning',
            confirmButtonText: 'Yes, Delete',
        }).then(function(result) {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });

    // Upload PDF button
    $(document).on('click', '.btn-upload-pdf', function() {
        var id = $(this).data('id');
        $('.upload-pdf-input[data-id="' + id + '"]').click();
    });

    $(document).on('change', '.upload-pdf-input', function() {
        var id = $(this).data('id');
        var file = this.files[0];
        if (!file) return;
        var formData = new FormData();
        formData.append('pdf_file', file);
        formData.append('_token', '{{ csrf_token() }}');
        $.ajax({
            url: '/admin/manages/pdf-mappings/' + id + '/upload-file',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                if (res && res.status === 200) {
                    showSuccessToast(res.message || 'File uploaded successfully.');
                    setTimeout(function() { location.reload(); }, 1000);
                } else {
                    showErrorToast(res.message || 'Upload failed.');
                }
            },
            error: function(xhr) {
                var msg = 'Upload failed.';
                try { msg = xhr.responseJSON.message || msg; } catch(e) {}
                showErrorToast(msg);
            }
        });
    });

    // Drag-to-reorder
    if ($('.sortable-applications').length && typeof $.fn.sortable !== 'undefined') {
        $('.sortable-applications').sortable({
            handle: '.drag-handle',
            axis: 'y',
            update: function() {
                var order = [];
                $('.drag-wrapper').each(function() { order.push($(this).data('id')); });
                $.post('{{ route("manages.pdf-mappings.update-order") }}', {
                    _token: '{{ csrf_token() }}',
                    order: order
                });
            }
        });
    }
})(jQuery);
</script>
@endpush