@extends('layouts.app')

@section('title', 'Customers')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Customers</h2>
    <a href="{{ route('customers.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> Add Customer</a>
</div>

<div class="card-table-wrapper">
    <div class="table-responsive">
        <table id="customersTable" class="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Customer Name</th>
                    <th>Mobile</th>
                    <th>City</th>
                    <th>GST Number</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($customers as $customer)
                <tr>
                    <td><span class="text-muted fw-bold">#{{ $customer->id }}</span></td>
                    <td class="fw-bold text-primary">{{ $customer->customer_name }}</td>
                    <td><span class="badge bg-light text-dark border">{{ $customer->mobile }}</span></td>
                    <td>{{ $customer->city ?? '-' }}</td>
                    <td>{{ $customer->gst_number ?? '-' }}</td>
                    <td>
                        <div class="action-buttons">
                            <a href="{{ route('customers.edit', $customer->id) }}" class="btn btn-warning action-btn text-white" title="Edit Customer"><i class="fas fa-edit"></i></a>
                            <button class="btn btn-danger action-btn delete-btn" data-id="{{ $customer->id }}" title="Delete Customer"><i class="fas fa-trash"></i></button>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection

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

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

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            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