@extends('layouts.app')

@section('title', 'customer')

@section('content')

     <div class="row">
            <div class="col-lg-12">
                <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
                    <div>
                        <h4 class="mb-3">Customer List</h4>
                        <p class="mb-0">A customer dashboard lets you easily gather and visualize customer data from optimizing <br>
                         the customer experience, ensuring customer retention. </p>
                    </div>
                    <a href="{{ url('/customer/add') }}" class="btn btn-primary add-list"><i class="las la-plus mr-3"></i>Add Customer</a>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="table-responsive rounded mb-3">
                <table class="data-table table mb-0 tbl-server-info">
                    <thead class="bg-white text-uppercase">
                        <tr class="ligth ligth-data">
                            <th>
                                <div class="checkbox d-inline-block">
                                    <input type="checkbox" class="checkbox-input" id="checkbox1">
                                    <label for="checkbox1" class="mb-0"></label>
                                </div>
                            </th>
                            <th>Name</th>
                            <th>Phone No.</th>
                            <th>Shop name</th>
                            <th>Area Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
<tbody class="ligth-body">

    @forelse($customers as $customer)

        <tr>

            {{-- Checkbox --}}
            <td>
                <div class="checkbox d-inline-block">
                    <input
                        type="checkbox"
                        class="checkbox-input"
                        id="checkbox{{ $customer->customer_id }}"
                    >
                    <label
                        for="checkbox{{ $customer->customer_id }}"
                        class="mb-0"
                    ></label>
                </div>
            </td>

            {{-- Customer Name --}}
            <td>
                {{ $customer->customer_name }}
            </td>

            {{-- Phone --}}
            <td>
                {{ $customer->customer_phonenum }}
            </td>

            {{-- Shop --}}
            <td>
                {{ $customer->shop_name }}
            </td>

            {{-- Area --}}
            <td>
                {{ $customer->area?->area_name ?? 'N/A' }}
            </td>

            {{-- Actions --}}
            <td>

                <div class="d-flex align-items-center list-action">

                    {{-- View --}}
                    <a
                        class="badge badge-info mr-2"
                        data-toggle="tooltip"
                        title="View"
                        href="{{ route('customer.show', $customer->customer_id) }}"
                    >
                        <i class="ri-eye-line mr-0"></i>
                    </a>

                    {{-- Edit --}}
                    <a
                        class="badge bg-success mr-2"
                        data-toggle="tooltip"
                        title="Edit"
                        href="{{ route('customer.edit', $customer->customer_id) }}"
                    >
                        <i class="ri-pencil-line mr-0"></i>
                    </a>

                    {{-- Delete --}}
                    <form
                        action="{{ route('customer.destroy', $customer->customer_id) }}"
                        method="POST"
                        style="display:inline;"
                    >

                        @csrf
                        @method('DELETE')

                        <button
                            type="submit"
                            class="badge bg-warning border-0 mr-2"
                            data-toggle="tooltip"
                            title="Delete"
                            onclick="return confirm('Are you sure you want to delete this customer?')"
                        >
                            <i class="ri-delete-bin-line mr-0"></i>
                        </button>

                    </form>

                </div>

            </td>

        </tr>

    @empty

        <tr>
            <td colspan="6" class="text-center">
                No customers found.
            </td>
        </tr>

    @endforelse

</tbody>  </table>
                </div>
            </div>
        </div>
        <!-- Page end  -->
    </div>
    <!-- Modal Edit -->
    <div class="modal fade" id="edit-note" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="popup text-left">
                        <div class="media align-items-top justify-content-between">                            
                            <h3 class="mb-3">Product</h3>
                            <div class="btn-cancel p-0" data-dismiss="modal"><i class="las la-times"></i></div>
                        </div>
                        <div class="content edit-notes">
                            <div class="card card-transparent card-block card-stretch event-note mb-0">
                                <div class="card-body px-0 bukmark">
                                    <div class="d-flex align-items-center justify-content-between pb-2 mb-3 border-bottom">                                                    
                                        <div class="quill-tool">
                                        </div>
                                    </div>
                                    <div id="quill-toolbar1">
                                        <p>Virtual Digital Marketing Course every week on Monday, Wednesday and Saturday.Virtual Digital Marketing Course every week on Monday</p>
                                    </div>
                                </div>
                                <div class="card-footer border-0">
                                    <div class="d-flex flex-wrap align-items-ceter justify-content-end">
                                        <div class="btn btn-primary mr-3" data-dismiss="modal">Cancel</div>
                                        <div class="btn btn-outline-primary" data-dismiss="modal">Save</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      </div>
    </div>
@endsection