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

@section('title', 'Requirements')

@section('content')
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="fw-bold">Requirements</h2>
        <button class="btn btn-success shadow rounded-pill px-4" id="addRequirementBtn">
            <i class="bi bi-plus-circle"></i> Add Requirement
        </button>
    </div>

    <div class="row mb-3">
        <div class="col-md-3">
            <select id="filter_country" class="form-select select2">
                <option value="">-- All Countries --</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <select id="filter_procedure" class="form-select select2">
                <option value="">-- All Procedures --</option>
                @foreach($procedures as $procedure)
                    <option value="{{ $procedure->id }}">{{ $procedure->procedure_name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <button id="resetFilters" class="btn btn-outline-secondary w-100">Reset Filters</button>
        </div>
    </div>

    <div class="card shadow rounded-4">
        <div class="card-body">
            <table class="table table-hover table-bordered align-middle" id="requirementsTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Country</th>
                        <th>Procedure</th>
                        <th>Requirement</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="requirementModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form id="requirementForm">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header border-0">
          <h5 class="modal-title">Requirement Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="requirement_id">
          <div class="mb-3">
            <label class="form-label">Country</label>
            <select id="country_id" class="form-select" required>
                <option value="">-- Select Country --</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Procedure</label>
            <select id="procedure_id" class="form-select" required>
                <option value="">-- Select Procedure --</option>
                @foreach($procedures as $procedure)
                    <option value="{{ $procedure->id }}">{{ $procedure->procedure_name }}</option>
                @endforeach
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Requirement</label>
            <textarea class="form-control" id="requirements" name="requirements"></textarea>
          </div>
        </div>
        <div class="modal-footer border-0">
          <button type="submit" class="btn btn-success rounded-pill px-4">Save</button>
          <button type="button" class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<!-- JS files for DataTable and buttons -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<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>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>

<!-- Summernote CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>

    
$(document).ready(function () {
    const modal = new bootstrap.Modal(document.getElementById('requirementModal'));
    let table;

    $('#requirements').summernote({
        height: 250,
        placeholder: 'Enter requirement details...',
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['insert', ['link']],
            ['view', ['codeview']]
        ]
    });

function loadRequirements(country_id = '', procedure_id = '') {
    $.get("{{ route('patent.requirements.data') }}", { country_id, procedure_id }, function(data) {
        if (table) table.destroy();
        table = $('#requirementsTable').DataTable({
            data: data,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'copy',
                    text: '<i class="bi bi-clipboard"></i> Copy',
                    className: 'btn btn-outline-dark btn-sm me-1',
                    exportOptions: {
                        columns: [1, 2, 3] 
                    }
                },
                {
                    extend: 'excel',
                    text: '<i class="bi bi-file-earmark-excel"></i> Excel',
                    className: 'btn btn-outline-success btn-sm me-1',
                    exportOptions: {
                        columns: [1, 2, 3]
                    }
                },
                {
                    text: '<i class="bi bi-file-earmark-pdf"></i> PDF',
                    className: 'btn btn-outline-danger btn-sm me-1',
                    action: function () {
                        let htmlContent = `
                            <html>
                                <head>
                                    <title>Requirements Report</title>
                                    <style>
                                        body { font-family: Arial, sans-serif; font-size: 13px; }
                                        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
                                        th, td { border: 1px solid #444; padding: 6px; text-align: left; vertical-align: top; }
                                        th { background: #f2f2f2; }

                                                  @media print {
                          
                        }
                                    </style>
                                </head>
                                <body>
                              
                                    
                                            ${data.map(r => `
                                               
                                                    <p>${r.requirements}</p>
                                             
                                            `).join('')}
                                             <footer class="main-footer">
                                                <strong>Copyright &copy; AIP&T .</strong>
                                                All rights reserved.
                                            </footer> 
                                    
                                </body>
                            </html>
                        `;
                        let win = window.open('', '_blank');
                        win.document.write(htmlContent);
                        win.document.close();
                        win.print();
                    }
                },
                {
                    text: '<i class="bi bi-printer"></i> Print',
                    className: 'btn btn-outline-primary btn-sm me-1',
                    action: function () {
                        let htmlContent = `
                            <html>
                                <head>
                                    <title>Print Requirements</title>
                                    <style>
                                        body { font-family: Arial, sans-serif; font-size: 13px; }
                                        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
                                        th, td { border: 1px solid #444; padding: 6px; text-align: left; vertical-align: top; }
                                        th { background: #f2f2f2; }
                                               @media print {
                            body::after {
                                content: "Copyright © AIP&T . All rights reserved.";
                                display: block;
                                text-align: center;
                                font-size: 12px;
                                margin-top: 20px;
                                color: #555;
                            }
                        }
                                    </style>
                                </head>
                                <body>
                                    <h2 style="text-align:center;">Requirements Report</h2>
                                    <table>
                                        <thead>
                                            <tr>
                                                <th>Country</th>
                                                <th>Procedure</th>
                                                <th>Requirements</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            ${data.map(r => `
                                                <tr>
                                                    <td>${r.country_name}</td>
                                                    <td>${r.procedure_name}</td>
                                                    <td>${r.requirements}</td>
                                                </tr>
                                            `).join('')}
                                        </tbody>
                                    </table>
                                </body>
                            </html>
                        `;
                        let win = window.open('', '_blank');
                        win.document.write(htmlContent);
                        win.document.close();
                        win.print();
                    }
                }
            ],
            columns: [
                { data: 'id' },
                { data: 'country_name' },
                { data: 'procedure_name' },
                { data: 'requirements' },
                {
                    data: null,
                    render: row => `
                        <button class="btn btn-sm btn-warning me-1 editBtn" data-id="${row.id}">Edit</button>
                        <button class="btn btn-sm btn-danger deleteBtn" data-id="${row.id}">Delete</button>
                    `
                }
            ]
        });
    });
}

    loadRequirements();

    $('#filter_country, #filter_procedure').on('change', function () {
        loadRequirements($('#filter_country').val(), $('#filter_procedure').val());
    });

    $('#resetFilters').click(function () {
        $('#filter_country').val('');
        $('#filter_procedure').val('');
        loadRequirements();
    });

    $('#addRequirementBtn').click(function () {
        $('#requirementForm')[0].reset();
        $('#requirement_id').val('');
        $('#requirements').summernote('code', '');
        modal.show();
    });

    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');
        $.get(`/patents/requirments/edit/${id}`, function (data) {
            $('#requirement_id').val(data.id);
            $('#requirements').summernote('code', data.Requirements);
            $('#country_id').val(data.country_id);
            $('#procedure_id').val(data.procedure_id);
            modal.show();
        });
    });

    $('#requirementForm').submit(function (e) {
        e.preventDefault();
        let id = $('#requirement_id').val();
        let method = id ? 'PUT' : 'POST';
        let url = id ? `/patents/requirments/${id}` : `{{ route('patent.requirements.store') }}`;

        $.ajax({
            url: url,
            method: method,
            data: {
                country_id: $('#country_id').val(),
                procedure_id: $('#procedure_id').val(),
                requirements: $('#requirements').summernote('code'),
                _token: '{{ csrf_token() }}'
            },
            success: function () {
                modal.hide();
                loadRequirements();
            },
            error: function(xhr) {
                alert("Error: " + xhr.responseText);
            }
        });
    });

    $(document).on('click', '.deleteBtn', function () {
        let id = $(this).data('id');
        if (confirm('Are you sure?')) {
            $.ajax({
                url: `/patents/requirments/${id}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                success: function () {
                    loadRequirements();
                },
                error: function(xhr) {
                    alert("Delete failed: " + xhr.responseText);
                }
            });
        }
    });
    
});
</script>
@endpush