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

@section('title', 'Associates')

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

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

        <a href="{{ route('patent.associates.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">
            <input type="text" id="filter_name" class="form-control" placeholder="Search by Name">
        </div>
        <div class="col-md-4">
            <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-4">
            <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="associatesTable">
                <thead class="table-light">
                    <tr>
                        <th>ID</th>
                        <th>Associate Name</th>
                        <th>Country</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

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

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

          <div class="mb-3">
            <label class="form-label">Country</label>
            <select name="country_id" 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>
        <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>

<!-- Email Modal -->
<div class="modal fade" id="emailModal" tabindex="-1">
  <div class="modal-dialog">
    <form id="emailForm" enctype="multipart/form-data">
      <div class="modal-content rounded-4 shadow">
        <div class="modal-header border-0">
          <h5 class="modal-title">Send Email to <span id="emailToName"></span></h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="to_email" id="to_email">
          <div class="mb-3">
            <label class="form-label">Subject</label>
            <input type="text" name="subject" class="form-control" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Message</label>
            <textarea name="message" class="form-control" rows="5" required></textarea>
          </div>
          <div class="mb-3">
            <label class="form-label">Attachment</label>
            <input type="file" name="attachment" class="form-control">
          </div>
        </div>
        <div class="modal-footer border-0">
          <button type="submit" class="btn btn-success rounded-pill px-4">Send</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')
<!-- DataTables & Buttons -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css"/>
<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('associateModal'));
    let table;

    function loadAssociates(name = '', country = '') {
        $.get("{{ route('patent.associates.data') }}", { name, country }, function(data) {
            if (table) table.destroy();
            table = $('#associatesTable').DataTable({
                data: data,
                dom: 'Bfrtip',
                buttons: ['copy', 'excel', 'pdf', 'print'],
                columns: [
                    { data: 'id' },
                    { data: 'associate_name' },
                    { data: 'country_name' },
                    {
                        data: null,
                      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>
        <button class="btn btn-sm btn-outline-info sendEmailBtn" 
            data-id="${row.id}" data-name="${row.associate_name}" data-email="${row.email}">
            <i class="bi bi-envelope"> Email</i>
        </button>`
                            
                    }
                ]
            });
        });
    }

    loadAssociates();

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

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

    $('#addAssociateBtn').click(function () {
        $('#associateForm')[0].reset();
        $('#associate_id').val('');
        modal.show();
    });

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

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

        $.ajax({
            url: url,
            method: method,
            data: $(this).serialize(),
            success: function () {
                modal.hide();
                loadAssociates();
            },
            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/associates/${id}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                success: function () {
                    loadAssociates();
                },
                error: function(xhr) {
                    alert("Delete failed: " + xhr.responseText);
                }
            });
        }
    });
});
const emailModal = new bootstrap.Modal(document.getElementById('emailModal'));

$(document).on('click', '.sendEmailBtn', function () {
    $('#to_email').val($(this).data('email'));
    $('#emailToName').text($(this).data('name'));
    $('#emailForm')[0].reset();
    emailModal.show();
});

$('#emailForm').submit(function (e) {
    e.preventDefault();
    const formData = new FormData(this);

    $.ajax({
        url: '{{ route("patent.associates.send_email") }}',
        method: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function () {
            emailModal.hide();
            alert('Email sent successfully!');
        },
        error: function (xhr) {
            alert('Failed: ' + xhr.responseText);
        }
    });
});

</script>
@endpush