@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">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>{{ $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>
                                        <a class="cust_archive_btn" data-id="{{ $customer->id }}" data-toggle="modal" data-target="#archive-modal">
                                            <img src="{{ asset('public/assets/img/archive.svg') }}" alt="Archive" title="Archive" />
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>




                        </table>
                    </form>

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

<div class="modal fade" id="archive-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="archive_id" name="customer_id">
                <p class="modal-text">Are you sure you want to<br>archive?</p>
                <div class="modal-btn d-flex ">
                    <a class="extra-btn pointer" data-dismiss="modal">No</a>
                    <a class="download-btn-custom customer_archive" href="{{ route('manage.customer') }}">Yes,
                        archive</a>
                </div>

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


@section('section_script')
<script src="{{ asset('public/assets/js/admin/manage_customer/main.js') }}"></script>
<!-- <script>
        $('#zero-config').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page _PAGE_ of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 10
        });
    </script> -->

<script>

$(document).ready(function() {
            $('<button><a class="extra-btn width-max-content" href="{{ route('customer_archive') }}">View Archive List</a></button><button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
                .insertBefore("#zero-config_filter label");
        });
    
</script>

@endsection