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


@section('title', 'Patent design')

@push('styles')
<!-- DataTables CSS -->
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- Buttons CSS -->
<link href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css" rel="stylesheet" />
@endpush

@section('content')
<div class="container-fluid px-4">
    <div class="card shadow rounded-4 border-0">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0">Patent design</h4>
            <a href="{{ route('patent.design.create') }}" class="btn btn-light btn-sm">
                <i class="fas fa-plus"></i> Add New
            </a>
        </div>

        <div class="card-body">

            {{-- فلاتر --}}
            <div class="row mb-3 g-2">

                <div class="col-md-3">
                    <select id="filterClient" class="form-select">
                        <option value="">-- Filter by Client --</option>
                        @foreach($clients as $client)
                        <option value="{{ $client }}">{{ $client }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <select id="filterCountry" class="form-select">
                        <option value="">-- Filter by Country --</option>
                        @foreach($countries as $country)
                        <option value="{{ $country }}">{{ $country }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-3">
                    <input type="text" id="applicationSearch" class="form-control" placeholder="Search Applications...">
                </div>
            </div>

          <div class="table-responsive">
    <table id="applicationsTable" class="table table-bordered table-hover nowrap" style="width:100%">
        <thead class="table-light">
            <tr>
                {{-- <th style="width: 200px">Title</th> تثبيت عرض العنوان --}}
                <th>AIPT Ref</th>
                <th>Client Ref</th>
                <th>Filling No</th>
                <th>Clients</th>
                <th>Applicants</th>
                <th>Country</th>
                <th>Status</th> {{-- العمود الجديد --}}
                <th class="text-center">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($data as $item)
            <tr>
                {{-- <td style="width: 200px">{{ $item->application_title }}</td> --}}
                <td>{{ $item->aipt_ref }}</td>
                <td>{{ $item->client_ref }}</td>
                <td>{{ $item->filing_no }}</td>
                <td>{{ $item->clients }}</td>
                <td>{{ $item->applicants }}</td>
                <td>{{ $item->countries }}</td>
                <td>
                    @php
    $statusColors = [
        'Active' => 'success',
        'Closed' => 'secondary',
        'Under filing' => 'primary',
        'Transferred' => 'info',
        'Rejected' => 'danger',
        'Inactive' => 'dark',
        'Abandon' => 'warning',
        'Inquiry' => 'light',
        '*****' => 'light'
    ];

    $color = $statusColors[$item->application_status] ?? 'secondary';
@endphp
                    <span class="badge bg-{{ $color }}">
                        {{ $item->application_status }}
                    </span>
                </td>
                <td class="text-center">
                         @if(Auth::user()->department_id==1 ||Auth::user()->role_id==1 )
                    <a href="{{ route('patent.design.edit', $item->id) }}"
                        class="btn btn-sm btn-outline-warning me-1" title="Edit">
                        <i class="fas fa-edit"></i>
                    </a>
            
                    <form action="{{ route('patent.design.destroy', $item->id) }}" method="POST"
                        class="d-inline-block deleteForm" data-id="{{ $item->id }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                            <i class="fas fa-trash-alt"></i>
                        </button>
                    </form>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div> <!-- end table-responsive -->

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </script>

    <!-- DataTables core -->
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

    <!-- DataTables 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.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>

    <!-- JSZip (required for Excel export) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <!-- pdfmake (optional if PDF export needed) -->
    <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>
    let table;
$(document).ready(function () {
    $('#designTable').DataTable({
        dom: 'Bfrtip', // B = Buttons, f = filter, r = processing, t = table, i = info, p = pagination
        buttons: [
            { extend: 'copyHtml5', className: 'btn btn-secondary btn-sm' },
            { extend: 'excelHtml5', className: 'btn btn-success btn-sm' },
            { extend: 'csvHtml5', className: 'btn btn-info btn-sm' },
            {
                extend: 'pdfHtml5',
                className: 'btn btn-danger btn-sm',
                orientation: 'landscape',
                pageSize: 'A4',
                exportOptions: { columns: ':visible:not(:last-child)' }
            },
            { extend: 'print', className: 'btn btn-primary btn-sm' },
            'colvis' // لإظهار/إخفاء الأعمدة
        ]
    });
});

    // حذف باستخدام AJAX
    $(document).on('submit', '.deleteForm', function (e) {
        e.preventDefault();
        if (!confirm('Are you sure you want to delete this record?')) return;
        const form = $(this);
        const id = form.data('id');
        $.ajax({
            url: `/patents/design/delete/${id}`,
            type: 'DELETE',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                if (response.status === 'success') {
                    alert(response.message);
                    table.row(form.closest('tr')).remove().draw(); // أو table.ajax.reload() لو بتستخدم Ajax
                } else {
                    alert('Deletion failed.');
                }
            },
            error: function () {
                alert('Error occurred while deleting.');
            }
        });
    });
</script>

    @endpush