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

@section('title', 'Procedures')

@section('content')
<div class="container mt-4">
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="fw-bold">Procedures</h2>
    
    <div class="d-flex gap-2">
        <button class="btn btn-primary shadow-sm rounded-pill px-4" id="addProcedureBtn">
            <i class="bi bi-plus-circle"></i> Add Procedure
        </button>
        
        <a href="{{ route('patent.procedures.consolidate') }}" class="btn btn-warning shadow-sm rounded-pill px-4">
            <i class="fas fa-object-group"></i> Consolidate Duplicates
        </a>
    </div>
</div>



    <!-- Filters -->
    <div class="row mb-3">
        <div class="col-md-4">
            <select id="filter_table_type" class="form-select">
                <option value="">-- All Table Types --</option>
                @foreach($tableTypes as $key => $label)
                    <option value="{{ $key }}">{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <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-bordered align-middle" id="proceduresTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Procedure Name</th>
                        <th>Table Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="procedureModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form id="procedureForm">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header border-0">
          <h5 class="modal-title fw-semibold">Procedure Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="procedure_id">

          <div class="mb-3">
            <label class="form-label">Procedure Name</label>
            <input type="text" name="procedure_name" id="procedure_name" class="form-control" required>
          </div>

          <div class="mb-3">
            <label class="form-label">Table Type</label>
            <select name="table_type" id="table_type" class="form-select" required>
                <option value="">-- Select Table --</option>
                <option value="pt_patent_tkts">Patents</option>
                <option value="pt_copyright_tkts">Copyrights</option>
                <option value="pt_utility_model_tkts">Utility Models</option>
                <option value="pt_design_tkts">Designs</option>
            </select>
          </div>
        </div>
        <div class="modal-footer border-0">
          <button class="btn btn-success px-4 rounded-pill" type="submit">Save</button>
          <button class="btn btn-outline-secondary rounded-pill" data-bs-dismiss="modal">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>
@endsection

@push('scripts')
<link href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.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>
<!-- Export 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.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.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>
$(document).ready(function () {

    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
    const modal = new bootstrap.Modal(document.getElementById('procedureModal'));
    let table;

    function loadProcedures(table_type = '') {
        $.get("{{ route('patent.procedures.data') }}", { table_type }, function(data) {
            if (table) table.destroy();

            table = $('#proceduresTable').DataTable({
                data: data,
                        dom: 'Bfrtip',
                buttons: ['copy', 'excel', 'pdf', 'print'],
                columns: [
                    { data: 'id' },
                    { data: 'procedure_name' },
                    { data: 'table_type_display' },
                    {
                        data: null,
                        render: row => `
                            <button class="btn btn-sm btn-outline-warning me-1 editBtn" data-id="${row.id}">
                                <i class="bi bi-pencil-square">edit</i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger deleteBtn" data-id="${row.id}">
                                <i class="bi bi-trash">delete</i>
                            </button>`
                    }
                ]
            });
        });
    }

    loadProcedures();

    $('#filter_table_type').on('change', function () {
        loadProcedures($(this).val());
    });

    $('#resetFilters').on('click', function () {
        $('#filter_table_type').val('');
        loadProcedures();
    });

    $(document).on('click', '#addProcedureBtn', function () {
        $('#procedureForm')[0].reset();
        $('#procedure_id').val('');
        modal.show();
    });

    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');
        $.get(`/patents/procedures/edit/${id}`, function (data) {
            $('#procedure_id').val(data.id);
            $('#procedure_name').val(data.procedure_name);
            $('#table_type').val(data.table_type);
            modal.show();
        });
    });

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

        $.ajax({
            url: url,
            method: method,
            data: $(this).serialize(),
            success: function () {
                modal.hide();
                loadProcedures($('#filter_table_type').val());
            },
            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/procedures/${id}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                success: function () {
                    loadProcedures($('#filter_table_type').val());
                },
                error: function(xhr) {
                    alert("Delete failed: " + xhr.responseText);
                }
            });
        }
    });
});
</script>
@endpush