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

@section('title', 'Applicants')

@section('content')
<div class="container mt-4">
<div class="d-flex justify-content-between align-items-center mb-3">
    <h2 class="fw-bold">Applicants</h2>

    <div class="d-flex gap-2">
        <button class="btn btn-primary shadow-sm rounded-pill px-4" id="addApplicantBtn">
            <i class="bi bi-plus-circle"></i> Add Applicant
        </button>

        <a href="{{ route('patent.applicants.consolidate') }}" class="btn btn-warning shadow-sm rounded-pill px-4">
            <i class="fas fa-object-group"></i> Consolidate Duplicates
        </a>
    </div>
</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_country" class="form-select">
                <option value="">-- All Countries --</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}">{{ $country->name }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <button id="resetFilters" class="btn btn-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="applicantsTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Country</th>
                        <th>Type</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="applicantModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="applicantForm">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header border-0">
          <h5 class="modal-title">Applicant Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="applicant_id">
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" id="name" required>
          </div>
          <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">Type</label>
            <select id="type" class="form-select" required>
                <option value="individual">Individual</option>
                <option value="company">Company</option>
            </select>
          </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('applicantModal'));
    let table;

    function loadApplicants(name = '', country_id = '') {
        $.get("{{ route('patent.applicants.data') }}", { name, country_id }, function(data) {
            if (table) table.destroy();
             table = $('#applicantsTable').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: 'name' },
        { data: 'country_name' },
        { data: 'type' },
        {
            data: null,
            render: row => `
                <button class="btn btn-sm btn-outline-warning me-1 editBtn" data-id="${row.id}">Edit</button>
                <button class="btn btn-sm btn-outline-danger deleteBtn" data-id="${row.id}">Delete</button>
            `
        }
    ]
});
        });
    }

    loadApplicants();

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

    $('#resetFilters').click(function () {
        $('#filter_name').val('');
        $('#filter_country').val('');
        loadApplicants();
    });

    $('#addApplicantBtn').click(function () {
        $('#applicantForm')[0].reset();
        $('#applicant_id').val('');
        modal.show();
    });

    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');
        $.get(`/patents/applicants/edit/${id}`, function (data) {
            $('#applicant_id').val(data.id);
            $('#name').val(data.name);
            $('#country_id').val(data.country_id);
            $('#type').val(data.type);
            modal.show();
        });
    });

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

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