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

@section('title', 'Service Types')

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

    <div class="row mb-3">
        <div class="col-md-3">
            <input type="text" id="filter_name" class="form-control" placeholder="Filter by Name">
        </div>
        <div class="col-md-3">
            <select id="filter_table_type" class="form-select">
                <option value="">-- All Table Types --</option>
                <option value="pt_patent_tkts">Patent Tickets</option>
                <option value="pt_applications">Applications</option>
                <option value="pt_requirments">Requirements</option>
                <!-- Add other table types if needed -->
            </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="serviceTypesTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Table Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="serviceTypeModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form id="serviceTypeForm">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header border-0">
          <h5 class="modal-title">Service Type Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="service_type_id">
          <div class="mb-3">
            <label class="form-label">Service Name</label>
            <input type="text" class="form-control" id="service_name" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Table Type</label>
            <select id="table_type" class="form-select" required>
                <option value="">-- Select Table --</option>
                <option value="pt_patent_tkts">Patent Tickets</option>
                <option value="pt_applications">Applications</option>
                <option value="pt_requirments">Requirements</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Description</label>
            <textarea class="form-control" id="description" rows="4"></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')
<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>
<script>

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

    function loadServiceTypes(name = '', table_type = '') {
        $.get("{{ route('patent.service_types.data') }}", { name, table_type }, function(data) {
            if (table) table.destroy();
            table = $('#serviceTypesTable').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'
                    },
                    {
                        extend: 'excel',
                        text: '<i class="bi bi-file-earmark-excel"></i> Excel',
                        className: 'btn btn-outline-success btn-sm me-1'
                    },
                    {
                        extend: 'pdf',
                        text: '<i class="bi bi-file-earmark-pdf"></i> PDF',
                        className: 'btn btn-outline-danger btn-sm me-1'
                    },
                    {
                        extend: 'print',
                        text: '<i class="bi bi-printer"></i> Print',
                        className: 'btn btn-outline-primary btn-sm me-1'
                    }
                ],
                columns: [
                    { data: 'id' },
                    { data: 'service_name' },
                    { data: 'description' },
                    { data: 'table_type' },
                    {
                        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>
                        `
                    }
                ]
            });
        });
    }

    loadServiceTypes();

    $('#filter_name, #filter_table_type').on('input change', function () {
        loadServiceTypes($('#filter_name').val(), $('#filter_table_type').val());
    });

    $('#resetFilters').click(function () {
        $('#filter_name').val('');
        $('#filter_table_type').val('');
        loadServiceTypes();
    });

    $('#addServiceTypeBtn').click(function () {
        $('#serviceTypeForm')[0].reset();
        $('#service_type_id').val('');
        modal.show();
    });

    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');
        $.get(`/patents/service-types/edit/${id}`, function (data) {
            $('#service_type_id').val(data.id);
            $('#service_name').val(data.service_name);
            $('#table_type').val(data.table_type);
            $('#description').val(data.description);
            modal.show();
        });
    });

    $('#serviceTypeForm').submit(function (e) {
        e.preventDefault();
        let id = $('#service_type_id').val();
        let method = id ? 'PUT' : 'POST';
        let url = id ? `/patents/service-types/${id}` : `{{ route('patent.service_types.store') }}`;

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