@extends('layouts.app')

@section('title', 'Job List | Saai Cards')

@section('content')
<div class="max-w-container-max mx-auto space-y-lg">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-md mb-xl">
        <div>
            <h2 class="font-headline-md text-headline-md text-on-surface">Job List</h2>
            <p class="font-body-md text-body-md text-secondary">Confirmed quotations appear here with full booking details.</p>
        </div>
    </div>

    <div class="bg-surface-container-lowest ambient-shadow rounded-xl p-md flex flex-wrap items-center gap-md border border-surface-container mb-lg">
        <div class="flex items-center gap-xs bg-surface-container-low px-sm py-xs rounded-lg border border-outline-variant/30">
            <span class="material-symbols-outlined text-secondary text-[18px]">filter_list</span>
            <span class="font-label-md text-label-md text-secondary">Filters:</span>
        </div>
        <select class="bg-transparent border-none font-label-md text-label-md text-on-surface focus:ring-0 cursor-pointer" id="statusFilter">
            <option value="">All Status</option>
            <option value="DTP Approved">DTP Approved</option>
            <option value="Printing">Printing</option>
            <option value="Delivery">Delivery</option>
        </select>
    </div>

    <div class="bg-surface-container-lowest ambient-shadow rounded-xl overflow-hidden border border-surface-container">
        <div class="overflow-x-auto custom-scrollbar p-md">
            <table id="jobsTable" class="w-full text-left border-collapse stripe hover dataTable">
                <thead>
                    <tr class="bg-surface-container-low/50">
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Job No</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Booking No</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Date</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Customer</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Category</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Job Name</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container text-right">Qty</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container text-right">Amount</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container">Status</th>
                        <th class="px-lg py-md font-label-md text-label-md text-secondary uppercase tracking-wider border-b border-surface-container text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-surface-container"></tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@stack('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        let table = $('#jobsTable').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('jobs.index') }}",
                data: function(d) {
                    d.job_status = $('#statusFilter').val();
                }
            },
            columns: [
                {data: 'job_no', name: 'job_no', render: function(data) {
                    return '<span class="font-label-md text-label-md text-primary font-bold">'+data+'</span>';
                }},
                {data: 'booking_no', name: 'booking_no'},
                {data: 'booking_date', name: 'booking_date'},
                {data: 'customer_name', name: 'customer_name'},
                {data: 'category_name', name: 'category_name', render: function(data) { return data || '-'; }},
                {data: 'job_name', name: 'job_name'},
                {data: 'quantity', name: 'quantity', className: 'text-right'},
                {data: 'grand_total', name: 'grand_total', className: 'text-right', render: function(data) {
                    return '<span class="font-bold">₹'+parseFloat(data).toFixed(2)+'</span>';
                }},
                {data: 'job_status', name: 'job_status', render: function(data, type, row) {
                    let badgeClass = 'bg-blue-50 text-blue-700 border-blue-100';
                    if (data === 'DTP Approved') badgeClass = 'bg-amber-50 text-amber-700 border-amber-100';
                    else if (data === 'Printing') badgeClass = 'bg-indigo-50 text-indigo-700 border-indigo-100';
                    else if (data === 'Delivery') badgeClass = 'bg-emerald-50 text-emerald-700 border-emerald-100';

                    return `<select class="status-changer outline-none font-label-sm text-label-sm rounded-full px-sm py-1 border ${badgeClass} cursor-pointer" data-id="${row.id}">
                        <option value="DTP Approved" ${data === 'DTP Approved' ? 'selected' : ''}>DTP Approved</option>
                        <option value="Printing" ${data === 'Printing' ? 'selected' : ''}>Printing</option>
                        <option value="Delivery" ${data === 'Delivery' ? 'selected' : ''}>Delivery</option>
                    </select>`;
                }},
                {data: 'action', orderable: false, searchable: false, className: 'text-center', render: function(data, type, row) {
                    return `<a href="{{ url('jobs') }}/${row.id}" class="w-8 h-8 inline-flex items-center justify-center rounded-lg hover:bg-primary-container text-secondary" title="View">
                        <span class="material-symbols-outlined text-[18px]">visibility</span>
                    </a>`;
                }},
            ],
            order: [[0, 'desc']],
            pageLength: 25,
            createdRow: function(row) {
                $(row).find('td').addClass('px-lg py-md border-b border-surface-container whitespace-nowrap');
            }
        });

        $('#statusFilter').on('change', function() { table.draw(); });

        $('body').on('change', '.status-changer', function() {
            let id = $(this).data('id');
            let newStatus = $(this).val();
            $.ajax({
                url: "{{ url('jobs') }}/" + id + "/status",
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'PATCH',
                    job_status: newStatus
                },
                success: function() {
                    Swal.fire({toast: true, position: 'top-end', icon: 'success', title: 'Status updated to ' + newStatus, showConfirmButton: false, timer: 1500});
                    table.draw(false);
                },
                error: function(xhr) {
                    let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Could not update status.';
                    Swal.fire({icon: 'error', title: 'Error', text: msg});
                    table.draw(false);
                }
            });
        });
    });
</script>