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

@section('title', 'Statuses')

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

    <div class="card shadow rounded-4">
        <div class="card-body">
            <table class="table table-hover table-bordered align-middle" id="statusTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Status Name</th>
                        <th>Color</th>
                        <th>Table Type</th>
                        <th>Has Deadline</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="statusModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form id="statusForm" class="needs-validation" novalidate>
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header border-0">
          <h5 class="modal-title fw-semibold">Status Form</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="id" id="status_id">

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

          <div class="mb-3">
            <label class="form-label">Color</label>
            <input type="color" name="color" id="color" class="form-control form-control-color" 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 class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="has_deadline" id="has_deadline" value="1">
            <label class="form-check-label" for="has_deadline">Has Deadline</label>
          </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"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet"/>

<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.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.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('statusModal'));

    function loadData() {
        $.get("{{ route('patent.methodes.data') }}", function(data) {
            $('#statusTable').DataTable({
                destroy: true,
                data: data,
                        dom: 'Bfrtip',
                buttons: ['copy', 'excel', 'pdf', 'print'],
                columns: [
                    { data: 'id' },
                    { data: 'methode_name' },
                    {
                        data: 'color',
                        render: d => `<span class="badge" style="background:${d}">${d}</span>`
                    },
                    {
                        data: 'table_type_display',
                        render: d => `<span class="text-dark">${d}</span>`
                    },
                    {
                        data: 'has_deadline',
                        render: d => d ? '<span class="text-success fw-bold">Yes</span>' : '<span class="text-danger fw-bold">No</span>'
                    },
                    {
                        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"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger deleteBtn" data-id="${row.id}">
                                <i class="bi bi-trash"></i>
                            </button>`
                    }
                ]
            });
        });
    }

    loadData();

    $(document).on('click', '#addStatusBtn', function () {
        $('#statusForm')[0].reset();
        $('#status_id').val('');
        modal.show();
    });

    $(document).on('click', '.editBtn', function () {
        let id = $(this).data('id');
        $.get(`/patents/methodes/edit/${id}`, function (data) {
            $('#status_id').val(data.id);
            $('#methode_name').val(data.methode_name);
            $('#color').val(data.color);
            $('#table_type').val(data.table_type);
            $('#has_deadline').prop('checked', data.has_deadline == 1);
            modal.show();
        });
    });

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

        $.ajax({
            url: url,
            method: method,
            data: $(this).serialize(),
            success: function () {
                modal.hide();
                loadData();
            },
            error: function(xhr) {
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    alert(Object.values(xhr.responseJSON.errors).join("\n"));
                } else {
                    alert("Error: " + xhr.responseText);
                }
            }
        });
    });

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