@include('admin.layouts.header')

<div class="col-sm-9 col-md-10">
    <div class="content">
        <div class="panel panel-default">
            <div class="panel-heading d-flex justify-content-between align-items-center">
                <span style="font-size:16px;font-weight:bold;">Customers</span>
                <button class="btn btn-success btn-sm" id="addCustomerBtn">
                    <i class="glyphicon glyphicon-plus"></i> Add Customer
                </button>
            </div>

            <div class="panel-body">
                <table class="table table-bordered table-striped" id="customerTable" width="100%">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th>Phone</th>
                            <th>Address</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- ✅ Bootstrap 3 Modal --}}
<div id="customerModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <form id="customerForm">
      @csrf
      <input type="hidden" id="id" name="id">
      <div class="modal-content">
        <div class="modal-header" style="background-color:#28a745; color:white;">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">Add Customer</h4>
        </div>

        <div class="modal-body">
          <div class="form-group">
              <label>Name <span class="text-danger">*</span></label>
              <input type="text" name="name" id="name" class="form-control" required>
          </div>
          <div class="form-group">
              <label>Phone</label>
              <input type="text" name="phone" id="phone" class="form-control">
          </div>
          <div class="form-group">
              <label>Address</label>
              <textarea name="address" id="address" class="form-control" rows="2"></textarea>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-success">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

@include('admin.layouts.footer')

{{-- ✅ DataTables + AJAX --}}
<script>
$(document).ready(function() {

    
    var table = $('#customerTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('customers.list') }}",
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'phone', name: 'phone' },
            { data: 'address', name: 'address' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });

    
    $('#addCustomerBtn').click(function() {
        $('#customerForm')[0].reset();
        $('#id').val('');
        $('.modal-title').text('Add Customer');
        $('#customerModal').modal('show');
    });

    
    $(document).on('click', '.editBtn', function() {
        var id = $(this).data('id');
        $.get("{{ url('admin/customers/edit') }}/" + id, function(data) {
            $('#id').val(data.id);
            $('#name').val(data.name);
            $('#phone').val(data.phone);
            $('#address').val(data.address);
            $('.modal-title').text('Edit Customer');
            $('#customerModal').modal('show');
        });
    });

    
    $('#customerForm').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('customers.store') }}",
            method: "POST",
            data: $(this).serialize(),
            success: function(res) {
                $('#customerModal').modal('hide');
                table.ajax.reload();
                alert(res.success);
            },
            error: function() {
                alert('Something went wrong.');
            }
        });
    });

    
    $(document).on('click', '.deleteBtn', function() {
        if(confirm('Are you sure you want to delete this customer?')) {
            var id = $(this).data('id');
            $.ajax({
                url: "{{ url('customers/delete') }}/" + id,
                type: 'DELETE',
                data: { "_token": "{{ csrf_token() }}" },
                success: function(res) {
                    table.ajax.reload();
                    alert(res.success);
                }
            });
        }
    });

});
</script>