@extends('layouts.app')

@section('title', 'Invoices')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Invoices</h2>
    <a href="{{ route('invoices.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Create Invoice</a>
</div>

<div class="card-table-wrapper">
    <div class="table-responsive">
        <table id="invoicesTable" class="table">
            <thead>
                <tr>
                    <th>S.No</th>
                    <th>Invoice No</th>
                    <th>Invoice Date</th>
                    <th>Customer Name</th>
                    <th>Mobile</th>
                    <th>Total Amount</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $invoice)
                <tr>
                    <td><span class="text-muted fw-bold">{{ $loop->iteration }}</span></td>
                    <td><span class="badge bg-primary bg-opacity-10 text-primary px-2 py-1">{{ $invoice->invoice_no }}</span></td>
                    <td>{{ $invoice->invoice_date->format('d/m/Y') }}</td>
                    <td class="fw-bold text-dark">{{ $invoice->customer->customer_name }}</td>
                    <td><span class="badge bg-light text-dark border">{{ $invoice->customer->mobile }}</span></td>
                    <td class="fw-bold text-success">₹{{ number_format($invoice->grand_total, 2) }}</td>
                    <td>
                        <div class="action-buttons">
                            <a href="{{ route('invoices.show', $invoice->id) }}" class="btn btn-info action-btn text-white" title="View"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('invoices.edit', $invoice->id) }}" class="btn btn-warning action-btn text-white" title="Edit"><i class="fas fa-edit"></i></a>
                            <a href="{{ route('invoices.print', $invoice->id) }}" target="_blank" class="btn btn-primary action-btn" title="Print"><i class="fas fa-print"></i></a>
                            <a href="{{ route('invoices.pdf', $invoice->id) }}" class="btn btn-secondary action-btn" title="Download PDF"><i class="fas fa-file-pdf"></i></a>
                            <button class="btn btn-danger action-btn delete-btn" data-id="{{ $invoice->id }}" title="Delete"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#invoicesTable').DataTable();

    $('.delete-btn').click(function() {
        let id = $(this).data('id');
        let url = `{{ url('invoices') }}/${id}`;

        Swal.fire({
            title: 'Are you sure?',
            text: "This invoice will be deleted permanently!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    success: function(response) {
                        if(response.success) {
                            Swal.fire('Deleted!', response.message, 'success')
                            .then(() => location.reload());
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error!', xhr.responseJSON.message || 'Something went wrong.', 'error');
                    }
                });
            }
        })
    });
});
</script>
@endpush