@extends('Admin.layouts.master')

@section('content')
    @php
        $currentPage = 'manage-customer';
    @endphp
    <style>
        /* CSS for action icons */
        .actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }

        .actions a {
            margin: 0 5px;
            /* Space between icons */
        }

        .actions img {
            width: 20px;
            /* Adjust the size as needed */
            height: 20px;
            /* Adjust the size as needed */
            cursor: pointer;
            transition: transform 0.2s;
        }

        .actions img:hover {
            transform: scale(1.2);
        }

        /* Ensuring icons are properly aligned in their table cells */
        td.actions {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Additional global styles for consistency */
        table td,
        table th {
            vertical-align: middle;
            text-align: center;
        }

        /* Ensuring the table does not overflow */
        table {
            width: 100%;
            overflow-x: auto;
        }
    </style>


    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Manage Customers</h6>
                        </div>
                        <div class="col-md-8">

                        </div>
                    </div>
                </div>
                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                    <div class="widget-content widget-content-area br-8 position-btn" style="overflow: auto;">
                        <form action="{{ route('export-selected-customer') }}" method="POST" id="customer-form">
                            @csrf
                            <input type="hidden" name="selected_id" id="ids" disabled>

                            <input type="hidden" name="all_id" id="all_id" value="all" disabled>
                            <table id="zero-config" class="table dt-table-hover" style="width:100%">
                                <thead class="text-center">
                                    <th class="w-10px pe-2">
                                        <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                            <input class="form-check-input" type="checkbox" name="customer_ids"
                                                id="select-all-ids" />
                                        </div>
                                    </th>

                                    <th class="text-start">Sr no</th>
                                    <th class="text-start">First Name</th>

                                    <th class="text-start">Last Name</th>

                                    <th class="text-start">User ID</th>
                                    <th class="text-start">Email Id</th>
                                    <th class="text-start">Redeemed Restaurant</th>
                                    <th class="text-start">Date of birth</th>
                                    <th class="text-start">Phone Number</th>

                                    <th class="text-start">Subscribed/Unsubscribed</th>
                                    <th class="text-start">Location</th>
                                    <!-- <th class="text-start">Passports</th> -->

                                    <th class="no-content">Action</th>
                                    </tr>
                                </thead>

                                <tbody class="text-center">
                                    @foreach ($customers as $customer)
                                        <tr>
                                            <td>
                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                    <input class="form-check-input" type="checkbox"
                                                        id="customer_checkbox_ids" name="customer_ids"
                                                        value="{{ $customer->id }}" />
                                                </div>
                                            </td>
                                            <td class="text-start">{{ $loop->iteration }}</td>
                                            <!-- <td class="text-start">{{ $customer->first_name }}</td> -->
                                            <td class="text-start">{{ $customer->first_name }}
                                            </td>
                                            <td class="text-start">{{ $customer->last_name }}</td>
                                            <td class="text-start">{{ $customer->id }}</td>
                                            <td class="text-start">{{ $customer->email_address }}</td>
                                            <td class="text-start">
                                                <a class="view-btn"
                                                    href="{{ url('/manage_customer_restaurant/' . $customer->id) }}">View</a>
                                            </td>

                                            <td>{{ \Carbon\Carbon::parse($customer->date_of_birth)->format('m/d/Y') }}</td>
                                            <td class="text-start">{{ $customer->phone_number }}</td>
                                            <!-- <td class="text-start"></td> -->
                                            <td>
                                                @if ($customer['is_subscribed'])
                                                    <span class="badge badge-success">Subscribed</span>
                                                @else
                                                    <span class="badge badge-danger">Unsubscribed</span>
                                                @endif
                                            </td>

                                            <td>{{ $customer->state ? $customer->state->name : 'No state assigned' }}</td>



                                            <!-- <td class="text-start">{{ $customer->address_line1 }}</td> -->

                                            <!-- <td class="text-start">{{ $customer->activePassportCount }}</td> -->
                                            <td class="actions">
                                                <a href="{{ url('/manage_customer_view/' . $customer->id) }}">
                                                    <img src="{{ asset('public/assets/img/view.svg') }}" alt="View"
                                                        title="View" />
                                                </a>
                                                <a href="{{ url('/manage_customer_edit/' . $customer->id) }}">
                                                    <img src="{{ asset('public/assets/img/edit.svg') }}" alt="Edit"
                                                        title="Edit" />
                                                </a>
                                                @if ($customer['is_subscribed'])
                                                    <a class="cust_unsubscribe_btn" id="unsubscribe_id"
                                                        data-id="{{ $customer->id }}" data-toggle="modal"
                                                        data-target="#unsubscribe-modal">
                                                        <img src="{{ asset('public/assets/img/archive.svg') }}"
                                                            alt="Unsubscribe" title="Unsubscribe" />
                                                    </a>
                                                @else
                                                    <a class="cust_unsubscribe_btn" data-id="{{ $customer->id }}">
                                                        <img src="{{ asset('public/assets/img/archive.svg') }}"
                                                            alt="Unsubscribe" title="Unsubscribe" />
                                                    </a>
                                                @endif
                                                <a href="#" id="delete_customer_user_id"
                                                    data-id="{{ $customer->id }}" data-toggle="modal"
                                                    data-target="#delete-customer-user-modal" alt="Delete"
                                                    title="Delete"><img
                                                        src="{{ asset('public/assets/img/delete-recycle.svg') }}" />
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>




                            </table>
                        </form>

                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-customer-user-modal" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">x</button>
                </div>
                <div class="modal-body">
                    <p class="modal-text" style="text-align:center;">Are you sure you want to<br>Delete</p>
                    <input type="hidden" id="customer_delete">
                    <div class="modal-btn d-flex ">
                        <a class="extra-btn" href="#" data-dismiss="modal">No</a>
                        <a class="download-btn-custom" id="delete_customer_user" href="#"
                            data-dismiss="modal">Yes</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="unsubscribe-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="modal-header">
                        <button type="button pointer" class="btn-close" data-dismiss="modal" aria-label="Close">
                            x
                        </button>
                    </div>
                    <input type="hidden" id="unsubscribe_id" name="customer_id">
                    <p class="modal-text" style="text-align:center;">Are you sure you want to<br>Unsubscribed?</p>
                    <div class="modal-btn d-flex ">
                        <a class="extra-btn pointer" data-dismiss="modal">No</a>
                        <a class="download-btn-custom customer_unsubscribe" id="unsubscibed"
                            href="{{ route('manage.customer') }}">Yes</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection


@section('section_script')
    <script src="{{ asset('public/assets/js/admin/manage_customer/main.js') }}"></script>
@endsection
