@extends('layouts.default')

@section('content')

<link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row mb-3">
        <div class="col-lg-12">
            <a href="{{ route('sales.create') }}" class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp;New Sale</a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <table class="table table-striped table-bordered table-hover" style="width: 100%;" id="sales-table">
                <thead>
                    <tr>
                        <th>Invoice ID</th>
                        <th>Reference No</th>
                        <th>Date</th>
                        <th>Value Exclusive Sales Tax</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
@push('scripts')
<script>
    $(document).ready(function() {
        $(document).on('click', '.edit-button', function() {
            let saleId = $(this).data('id');
            // Redirect to edit page
            window.location.href = `/sales/${saleId}/edit`;
        });

        $('#sales-table').DataTable({
            processing: true,
            serverSide: true,
            info: false,
            lengthChange: false,
            ajax: '{{ route('sales.data') }}',
            columns: [
                { data: 'id', name: 'sales.id' },
                { data: 'ref_no', name: 'sales.ref_no', defaultContent: '-' },
                { data: 'date', name: 'sales.date', render: function(data) {
                    if (data) {
                        // Data is already formatted as dd/mm/yyyy HH:mm from backend
                        return data;
                    }
                    return '-';
                }},
                { data: 'value_exclusive_sales_tax', name: 'sales.value_exclusive_sales_tax', render: function(data) {
                    return parseFloat(data).toFixed(2);
                }},
                { data: 'status', name: 'sales.status', render: function(data) {
                    return data.charAt(0).toUpperCase() + data.slice(1).replace('-', ' ');
                }},
                {
                    data: null,
                    render: function (data, type, row) {
                        return `
                            <button class="btn btn-info btn-circle edit-button" type="button" data-id="${row.id}"><i class="fa fa-edit"></i></button>
                            <button class="btn btn-danger btn-circle delete-button" type="button" data-id="${row.id}"><i class="fa fa-times"></i></button>
                        `;
                    },
                    width: '150px', orderable: false, searchable: false
                }
            ],
            order: [[0, 'desc']]
        });

        // Delete button function
        $(document).on('click', '.delete-button', function() {
            let rowId = $(this).data('id');

            // Confirm deletion using SweetAlert
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to delete this record?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: `{{ url('sales/delete') }}/${rowId}`,
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                // Refresh DataTable after deletion
                                $('#sales-table').DataTable().ajax.reload(null, false);
                                
                                // Show success alert
                                Swal.fire('Deleted!', 'Record has been deleted.', 'success');
                            } else {
                                // Error alert for failed deletion
                                Swal.fire({
                                    title: 'Error!',
                                    text: 'Failed to delete the record.',
                                    icon: 'error'
                                });
                            }
                        },
                        error: function() {
                            // General error alert
                            Swal.fire({
                                title: 'Error!',
                                text: 'An error occurred while deleting the record.',
                                icon: 'error'
                            });
                        }
                    });
                }
            });
        });
    });   
</script>
@endpush
@endsection