@extends('layouts.app')
@section('content')
    @include('includes.bread_crumb_with_header', [
        'header' => 'Account Managers',
        'bread_crumbs' => ['Home' => "", 'Support' => ''],
    ])


    <div class="card mb-5 mb-xl-8 m-10">
        <!--begin::Header-->
        <div class="card-header align-items-center py-5 gap-2 gap-md-5">









            <div class="card-title d-flex gap-3">
                <form action="{{ url('admin/support/account-managers/search') }}" method="post">
                    @csrf
                    <div class="d-flex align-items-center position-relative my-1 working-on-it">

                    <span class="svg-icon svg-icon-1 position-absolute ms-4">

                        @if(\Request::is('admin/support/account-managers/search'))
                            <a href="{{ url('admin/support/account-managers') }}" class="border-0 text-gray-400 btn"
                               style="background: transparent;">

                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                 class="bi bi-x-lg" viewBox="0 0 16 16">
                          <path
                              d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
                        </svg>


                                </a>
                        @else
                            <button class="border-0 text-gray-400" style="background: transparent;" type="submit">
                                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                       class="bi bi-search" viewBox="0 0 16 16">
                          <path
                              d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>

                        </button>
                        @endif
                    </span>
                        <input type="text" data-kt-docs-table-filter="search" name="search"
                               class="form-control form-control-solid w-250px ps-20 " placeholder="Search Account Manager" {{\Request::is('admin/support/account-managers/search')? "value=".$searchText." "."disabled" :''}} required>
                        <select class="form-control form-control-solid form-select float-right w-150px product-filter" data-control="select2"
                                data-hide-search="true" name="searchType" {{\Request::is('admin/support/account-managers/search') ? "disabled" :''}}>
                            <option value="1" {{\Request::is('admin/support/account-managers/search') && $searchType == 1 ? "selected" :''}}>Name</option>
                            <option value="2" {{\Request::is('admin/support/account-managers/search') && $searchType == 2 ? "selected" :''}} >Email</option>
                        </select>
                    </div>
                </form></div>






            <div class="card-toolbar flex-row-fluid justify-content-end gap-5">
                <button type="button" class="btn btn-primary add-manager">Add Manager</button>
            </div>
        </div>
        <!--end::Header-->
        <!--begin::Body-->
        <div class="card-body py-3">
            <!--begin::Table container-->
            <div class="table-responsive overflow-x-auto">
                <!--begin::Table-->
                <table id="accountManager-content"
                       class="table align-middle fs-6 no-footer">
                    <thead>
                    <tr class="fw-semibold fs-6 text-gray-400 text-center">
                        <th class="fw-bold fs-6">#</th>
                        <th class="fw-bold fs-6">Name</th>
                        <th class="fw-bold fs-6">Email</th>
                        <th class="fw-bold fs-6">Whatsapp Number</th>
                        <th class="fw-bold fs-6 text-center">Response Time <small>(Minutes)</small></th>
                        <th class="fw-bold fs-6 text-center">Assigned Sellers</th>
                        <th class="fw-bold fs-6 text-end">Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($account_manager_details as $index => $account_manager_detail)
                        <tr class="fw-semibold fs-6 text-gray-700 text-center">
                            <td>{{ $index + 1 }}</td>
                            <td>{{ substr_replace($account_manager_detail->name, " ...", 18) }}</td>
                            <td>{{ $account_manager_detail->email }}</td>
                            <td>{{ $account_manager_detail->contact_no }}</td>
                            <td class="text-center">
                                {{ number_format((float) $account_manager_detail->response_time, 0, '', '') }}
                            </td>
                            <td class="text-center text-hover-info seller-list">{{ $account_manager_detail->assignedSellers }}</td>
                            <td class="text-end ">
                                <a href="#" class="btn btn-sm btn-light btn-active-light-primary"
                                   data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                    <span class="svg-icon svg-icon-5 m-0">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                fill="currentColor"></path>
                                        </svg>
                                    </span>
                                    <!--end::Svg Icon-->
                                </a>
                                <!--begin::Menu-->
                                <div
                                    class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-200px py-4"
                                    data-kt-menu="true">
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3 dispatch">
                                        <a class="menu-link px-3 product-edit d-flex gap-5 edit-manager"
                                           data-id="{{ $account_manager_detail->id }}">
                                            <i class="bi bi-pencil"></i>Edit
                                        </a>
                                    </div>
                                    <!--end::Menu item-->
                                    <div class="menu-item px-3">
                                        <a class="menu-link px-3 acc-delete d-flex gap-5 delete-manager"
                                           data-id="{{ $account_manager_detail->id }}">
                                            <i class="bi bi-trash"></i>Delete
                                        </a>
                                    </div>
                                    <div class="menu-item px-3">
                                        <a class="menu-link px-3 assign-sellers d-flex gap-5"
                                           href="{{ url('/admin/support/account-managers/assign/page')."/".$account_manager_detail->id }}">
                                            <i class="bi bi-person-plus"></i>Assign Sellers</a>
                                    </div>
                                </div>
                                <!--end::Menu-->
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                {{ $account_manager_details->links() }}
            </div>
            <!--end::Table container-->
        </div>
        <!--begin::Body-->
    </div>

@endsection
@push('script')

    <script>
        const modalId = "modal";
        $(document).on('click', '.add-manager', async function () {
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                loadButton(btn, 'Loading ...');
                let loadURL = `${baseUrl}/admin/support/account-managers/create`;
                await loadModal(modalId, loadURL);
            } catch (err) {
                toast.error("Could not load add event popup. (error_ref: add_account_manager)");
                console.log("add_account_manager", err);
            } finally {
                resetButton(btn, btnTitle);
            }
        });
    </script>

    {{-- Store manager --}}
    <script>
        $(document).on('submit', '.store-accountManager', async function (e) {
            e.preventDefault();
            let form = $(this);
            const btn = $(this).find('.add-managers-btn');
            const btnTitle = btn.html();
            try {
                loadButton(btn);
                const url = "{{ route('admin.support.account-managers.store') }}";
                let ajaxRequest = new HttpRequest(url, 'POST');
                ajaxRequest.set_data_by_form_object(form);
                let response = await ajaxRequest.call();
                $("#" + modalId).modal("hide");
                location.reload();
            } catch (err) {
                toast.error(err);
            } finally {
                resetButton(btn, btnTitle);
            }
        });
    </script>

    {{-- Edit manager --}}
    <script>
        $(document).on('click', '.edit-manager', async function () {
            const btn = $(this);
            const btnTitle = btn.html();
            try {
                loadButton(btn, 'Loading ...');
                let managerId = $(this).attr('data-id');
                let loadUrl = baseUrl + '/admin/support/account-managers/' + managerId + '/edit';
                await loadModal(modalId, loadUrl);
            } catch (err) {
                toast.error("Could not load add event popup. (error_ref: edit_account_manager)");
                console.log("edit_account_manager", err);
            } finally {
                resetButton(btn, btnTitle);
            }

        });
    </script>
    <script>
        $(document).on('submit', '#update-account-manager-form', async function (e) {
            e.preventDefault();
            let form = $(this);
            const btn = $(this).find('.edit-managers-btn');
            const btnTitle = btn.html();
            const managerId = $(this).attr('data-id');
            try {
                loadButton(btn);
                const url = $(this).attr('action');
                let ajaxRequest = new HttpRequest(url, 'PUT');
                ajaxRequest.set_data_by_form_object(form);
                let response = await ajaxRequest.call();
                toast.success(response.message);
                console.log(response);
                $("#" + modalId).modal("hide");
                location.reload();
            } catch (err) {
                toast.error(err);
            } finally {
                resetButton(btn, btnTitle);
            }
        });
    </script>

    {{-- Update manager --}}


    {{-- Delete Sellers --}}
    <script>
        $(document).on("click", ".delete-manager", async function () {
            if (await isConfirmToProcess("Warning", "", 'Are you sure! You want to delete',
                'warning')) {
                try {
                    let eventId = $(this).data('id');
                    let url = `${baseUrl}/admin/support/account-managers/${eventId}`;
                    let ajaxRequest = new HttpRequest(url, 'DELETE');
                    ajaxRequest.set_data_as_object({'_token': csrfToken});
                    let response = await ajaxRequest.call();
                    toast.success(response.message);
                    location.reload();
                } catch (err) {
                    toast.error(err);
                }
            }
        });
    </script>





    <script>
        $(document).on('change','.contact-number-field',function (){
          if($(this).val()){

          }
        });
    </script>

@endpush