@extends('patent::layouts.master')

@section('title', 'Patent Applications')

@push('styles')
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

@endpush

@section('content')
<div class="container-fluid px-4">
    <div class="card shadow rounded-4 border-0">
     <div class="container-fluid px-4">
    <div class="card shadow rounded-4 border-0">
  <div class="card-header bg-primary text-white d-flex flex-wrap justify-content-between align-items-center">
    <h4 class="mb-2 mb-md-0">Patent Applications</h4>
    <div class="d-flex gap-2">
        <a href="{{ route('patent.applications.create') }}" class="btn btn-light btn-sm shadow-sm rounded-pill">
            <i class="fas fa-plus"></i> Add New
        </a>
        <button class="btn btn-success btn-sm shadow-sm rounded-pill" data-bs-toggle="modal" data-bs-target="#importModal">
            <i class="fas fa-file-import"></i> Import
        </button>
        <a href="{{ route('patent.reports.index') }}" class="btn btn-warning btn-sm shadow-sm rounded-pill">
            <i class="fas fa-chart-bar"></i> Reports
        </a>
    </div>
</div>

</div>

<!-- Import Modal -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content shadow-lg border-0">
      
      <div class="modal-header text-white" style="background: linear-gradient(90deg, #007bff, #00c6ff);">
        <h5 class="modal-title fw-bold" id="importModalLabel">
          <i class="bi bi-file-earmark-excel"></i> Import Applications
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <form action="{{ route('patent.import.store') }}" method="POST" enctype="multipart/form-data" id="importForm">
            @csrf

            <div class="mb-3">
                <label class="form-label fw-bold">Select Excel File</label>
                <div class="input-group">
                    <span class="input-group-text bg-light"><i class="bi bi-upload"></i></span>
                    <input type="file" name="file" class="form-control" accept=".xls,.xlsx" required>
                </div>
                <small class="text-muted">Allowed formats: .xls, .xlsx</small>
            </div>

            <div class="mb-3">
                <label class="form-label fw-bold">Select Country</label>
                <div class="input-group">
                    <select name="country_id" class="form-select select2" required>
                        <option value="">-- Country --</option>
                        @foreach($country as $c)
                            <option value="{{ $c->id }}">{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <button type="submit" class="btn btn-success w-100" id="uploadBtn">
                <i class="bi bi-cloud-arrow-up"></i> Upload & Import
            </button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.getElementById('importForm').addEventListener('submit', function(){
    let btn = document.getElementById('uploadBtn');
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Uploading...';
});
</script>


        <div class="card-body">
            {{-- Filters --}}
            <div class="row mb-3 g-2">
                <div class="col-md-3">
                    <select id="filterClient" class="form-select select2">
                        <option value="">-- Filter by Client --</option>
                        @foreach($clients as $client)
                        <option value="{{ $client }}">{{ $client }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <select id="filterCountry" class="form-select select2">
                        <option value="">-- Filter by Country --</option>
                        @foreach($countries as $country)
                        <option value="{{ $country }}">{{ $country }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <input type="text" id="applicationSearch" class="form-control" placeholder="Search Applications...">
                </div>

                <div class="col-md-3">
                    <button class="btn btn-outline-secondary" id="resetFilters">Reset Filters</button>
                </div>
            </div>

            <div class="table-responsive">
                <table id="applicationsTable" class="table table-bordered table-hover nowrap" style="width:100%">
                    <thead class="table-light">
                        <tr>
                            <th>AIPT Ref</th>
                            <th>Client Ref</th>
                            <th>PCT No</th>
                            <th>Clients</th>
                            <th>Applicants</th>
                            <th>Country</th>
                            <th>Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables Core -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

<!-- Excel/PDF dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>

<!-- Select2 -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    // Set up CSRF token for all AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $(document).ready(function () {
        $('.select2').select2({ width: '100%' });

        const table = $('#applicationsTable').DataTable({
            processing: true,
            serverSide: true,
            language: {
                processing: "Loading applications...",
                emptyTable: "No applications found",
                zeroRecords: "No matching applications found"
            },
            ajax: {
                url: "{{ route('patent.applications.ajax') }}",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: function (d) {
                    d.client = $('#filterClient').val();
                    d.country = $('#filterCountry').val();
                },
                error: function (xhr, error, thrown) {
                    console.error('DataTables Ajax Error:', xhr.responseText);
                    
                    // Handle authentication errors
                    if (xhr.status === 401 || xhr.status === 302) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.redirect) {
                                window.location.href = response.redirect;
                                return;
                            }
                        } catch (e) {
                            // If not JSON, check if it's a redirect response
                            if (xhr.responseText.includes('login') || xhr.responseText.includes('redirect')) {
                                window.location.href = '/login';
                                return;
                            }
                        }
                        alert('Session expired. Please log in again.');
                        window.location.href = '/login';
                        return;
                    }
                    
                    // Handle other errors
                    if (xhr.status === 500) {
                        alert('Server error occurred. Please try again later.');
                        return;
                    }
                    
                    // Generic error handling
                    alert('Error loading data: ' + (thrown || 'Unknown error'));
                }
            },
            columns: [
                { data: 'aipt_ref', name: 't.aipt_ref' },
                { data: 'client_ref', name: 't.client_ref' },
                { data: 'pct_no', name: 't.pct_no' },
                { data: 'clients', name: 'clients' },
                { data: 'applicants', name: 'applicants' },
                { data: 'countries', name: 'countries' },
                { data: 'application_status', name: 't.application_status', orderable: false, searchable: false },
                { data: 'actions', name: 'actions', orderable: false, searchable: false },
            ],
            dom: 'Bfrtip',
            buttons: [
                { extend: 'copyHtml5', className: 'btn btn-secondary btn-sm' },
                { extend: 'excelHtml5', className: 'btn btn-success btn-sm' },
                { extend: 'csvHtml5', className: 'btn btn-info btn-sm' },
                {
                    extend: 'pdfHtml5',
                    className: 'btn btn-danger btn-sm',
                    orientation: 'landscape',
                    pageSize: 'A4',
                    exportOptions: { columns: ':visible:not(:last-child)' }
                },
                { extend: 'print', className: 'btn btn-primary btn-sm' },
                'colvis'
            ]
        });

        // Filters
        $('#filterClient, #filterCountry').on('change', function () {
            table.draw();
        });

        $('#applicationSearch').on('keyup', function () {
            table.search(this.value).draw();
        });

        $('#resetFilters').on('click', function () {
            $('#filterClient').val('');
            $('#filterCountry').val('');
            $('#applicationSearch').val('');
            table.search('').columns().search('').draw();
        });
    });
</script>
@endpush