@extends('panel.layouts.master')
@section('content')
    <div
        class="content transition-[margin,width] duration-100 rtl:xl:pr-3.5 ltr:xl:pl-3.5 pt-[54px] pb-16 relative z-10 group mode content--compact rtl:xl:mr-[275px] ltr:xl:ml-[275px] mode--light rtl:[&.content--compact]:xl:mr-[91px] ltr:[&.content--compact]:xl:ml-[91px]">
        <div class="px-5 mt-16">
            <div class="container">
                <div class="grid grid-cols-12 gap-x-6 gap-y-10">
                    <div class="col-span-12">
                        <div class="flex flex-col gap-y-3 md:h-10 md:flex-row md:items-center">
                            <div class="text-base font-medium group-[.mode--light]:text-white">
                                تاریخچه تخصیص
                            </div>
                        </div>
{{--                        Show History Modal--}}
                        <div
                            data-tw-backdrop=""
                            aria-hidden="true"
                            tabindex="-1"
                            id="show_history"
                            class="modal group bg-gradient-to-b from-theme-1/50 via-theme-2/50 to-black/50 transition-[visibility,opacity] w-screen h-screen fixed rtl:right-0 ltr:left-0 top-0 [&amp;:not(.show)]:duration-[0s,0.2s] [&amp;:not(.show)]:delay-[0.2s,0s] [&amp;:not(.show)]:invisible [&amp;:not(.show)]:opacity-0 [&amp;.show]:visible [&amp;.show]:opacity-100 [&amp;.show]:duration-[0s,0.4s]">
                            <div
                                data-tw-merge
                                class="w-[90%] mx-auto bg-white relative rounded-md shadow-md transition-[margin-top,transform] duration-[0.4s,0.3s] -mt-16 group-[.show]:mt-16 group-[.modal-static]:scale-[1.05] dark:bg-darkmode-600 sm:w-[460px]">
                                <div
                                    class="flex items-center px-5 py-3 border-b border-slate-200/60 dark:border-darkmode-400">
                                    <h2 class="rtl:ml-auto ltr:mr-auto text-base font-medium">
                                        تاریخچه تخصیص
                                    </h2>
                                </div>

                                <div class="modal-body text-center"></div>
                                <div
                                    class="px-5 py-3 rtl:text-left ltr:text-right border-t border-slate-200/60 dark:border-darkmode-400">
                                    <button
                                        data-tw-merge
                                        data-tw-dismiss="modal" type="button"
                                        class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&amp;:hover:not(:disabled)]:bg-opacity-90 [&amp;:hover:not(:disabled)]:border-opacity-90 [&amp;:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed border-secondary text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&amp;:hover:not(:disabled)]:bg-secondary/20 [&amp;:hover:not(:disabled)]:dark:bg-darkmode-100/10 rtl:ml-1 ltr:mr-1 w-20 rtl:ml-1 ltr:mr-1 w-20">
                                        بستن
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="mt-3.5 flex flex-col gap-8">
                            <div class="box box--stacked flex flex-col">
                                <form action="{{ route('assign.history') }}" method="post">
                                    @csrf
                                    <div
                                        class="flex flex-col gap-y-2 gap-x-3 p-5 sm:flex-row sm:items-center flex-wrap">
                                        <div>
                                            <div class="relative">
                                                <i data-tw-merge="" data-lucide="calendar"
                                                   class="absolute inset-y-0 rtl:right-0 ltr:left-0 z-10 my-auto rtl:mr-3 ltr:ml-3 h-4 w-4 stroke-[1.3] text-slate-500"></i>
                                                <input data-tw-merge="" type="text" data-single-mode="true" name="date" value=""
                                                       data-jdp class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 [&[readonly]]:dark:border-transparent transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md placeholder:text-slate-400/90 focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus:border-primary focus:border-opacity-40 dark:bg-darkmode-800 dark:border-transparent dark:focus:ring-slate-700 dark:focus:ring-opacity-50 dark:placeholder:text-slate-500/80 [&[type='file']]:border rtl:file:ml-4 ltr:file:mr-4 file:py-2 file:px-4 rtl:file:rounded-r-md ltr:file:rounded-l-md file:border-0 rtl:file:border-l-[1px] ltr:file:border-r-[1px] file:border-slate-100/10 file:text-sm file:font-semibold file:bg-slate-100 file:text-slate-500/70 hover:file:bg-200 group-[.form-inline]:flex-1 group-[.input-group]:rounded-none rtl:group-[.input-group]:[&:not(:first-child)]:border-r-transparent ltr:group-[.input-group]:[&:not(:first-child)]:border-l-transparent rtl:group-[.input-group]:first:rounded-r ltr:group-[.input-group]:first:rounded-l rtl:group-[.input-group]:last:rounded-l ltr:group-[.input-group]:last:rounded-r group-[.input-group]:z-10">
                                                </div>
                                        </div>
                                        <button data-tw-merge
                                                class="transition duration-200 border shadow-sm inline-flex items-center justify-center py-2 px-3 rounded-md font-medium cursor-pointer focus:ring-4 focus:ring-primary focus:ring-opacity-20 focus-visible:outline-none dark:focus:ring-slate-700 dark:focus:ring-opacity-50 [&:hover:not(:disabled)]:bg-opacity-90 [&:hover:not(:disabled)]:border-opacity-90 [&:not(button)]:text-center disabled:opacity-70 disabled:cursor-not-allowed bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 w-24 w-24">
                                            جستجو
                                        </button>
                                    </div>
                                </form>
                                <div style="overflow: scroll;">
                                    <table data-tw-merge=""
                                           class="table w-full rtl:text-right ltr:text-left border-b border-slate-200/60">
                                        <thead data-tw-merge="" class="">
                                        <tr data-tw-merge="" class="">
                                            <td data-tw-merge=""
                                                class="px-5 border-b dark:border-darkmode-300 border-t border-slate-200/60 bg-slate-50 py-4 font-medium text-slate-500">
                                                ردیف
                                            </td>
                                            <td data-tw-merge=""
                                                class="px-5 border-b dark:border-darkmode-300 border-t border-slate-200/60 bg-slate-50 py-4 font-medium text-slate-500">
                                                کارشناس
                                            </td>
                                            <td data-tw-merge=""
                                                class="px-5 border-b dark:border-darkmode-300 border-t border-slate-200/60 bg-slate-50 py-4 text-center font-medium text-slate-500">
                                                نوع
                                            </td>
                                            <td data-tw-merge=""
                                                class="px-5 border-b dark:border-darkmode-300 border-t border-slate-200/60 bg-slate-50 py-4 font-medium text-slate-500">
                                                تعداد
                                            </td>
                                            <td data-tw-merge=""
                                                class="px-5 border-b dark:border-darkmode-300 w-20 border-t border-slate-200/60 bg-slate-50 py-4 text-center font-medium text-slate-500">
                                                عملیات
                                            </td>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($data as $key => $item)
                                            @php
                                                $i = 0;
                                            @endphp
                                            @foreach($item->groupBy('type') as $type => $history)
                                            <tr data-tw-merge="" class="[&_td]:last:border-b-0">
                                                <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">
                                                    <span class="whitespace-nowrap">
                                                        {{ ++$key }}
                                                    </span>
                                                </td>
                                                <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">
                                                    <span class="whitespace-nowrap">
                                                        {{ $history[$i]->expert->fullName }}
                                                    </span>
                                                </td>
                                                <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">
                                                    <span class="whitespace-nowrap">
                                                        {{ $type }}
                                                    </span>
                                                </td>
                                                <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">
                                                    <span class="whitespace-nowrap">
                                                        {{ $history->count() }}
                                                    </span>
                                                </td>
                                                <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 relative border-dashed py-4 dark:bg-darkmode-600">
                                                    <div class="flex items-center justify-center">
                                                        <div data-tw-merge="" data-tw-placement="bottom-start"
                                                             class="dropdown relative h-5">
                                                            <button data-tw-toggle="dropdown" aria-expanded="false"
                                                                    class="cursor-pointer h-5 w-5 text-slate-500"><i
                                                                    data-tw-merge="" data-lucide="more-vertical"
                                                                    class="stroke-[1] w-5 h-5 fill-slate-400/70 stroke-slate-400/70"></i>
                                                            </button>
                                                            <div data-transition="" data-selector=".show"
                                                                 data-enter="transition-all ease-linear duration-150"
                                                                 data-enter-from="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                 data-enter-to="!mt-1 visible opacity-100 translate-y-0"
                                                                 data-leave="transition-all ease-linear duration-150"
                                                                 data-leave-from="!mt-1 visible opacity-100 translate-y-0"
                                                                 data-leave-to="absolute !mt-5 invisible opacity-0 translate-y-1"
                                                                 class="dropdown-menu absolute z-[9999] hidden">
                                                                <div data-tw-merge=""
                                                                     class="dropdown-content rounded-md border-transparent bg-white p-2 shadow-[0px_3px_10px_#00000017] dark:border-transparent dark:bg-darkmode-600 w-40">
                                                                    <a data-tw-toggle="modal" data-tw-target="#show_history" data-expert_id="{{ $history[$i]->expert_id }}" data-type="{{ $type }}" data-date="{{ $date }}"
                                                                       class="btn_show cursor-pointer flex items-center p-2 transition duration-300 ease-in-out rounded-md hover:bg-slate-200/60 dark:bg-darkmode-600 dark:hover:bg-darkmode-400 dropdown-item"><i
                                                                            data-tw-merge="" data-lucide="eye"
                                                                            class="stroke-[1] rtl:ml-2 ltr:mr-2 h-4 w-4"></i>
                                                                        جزئیات</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            @endforeach
                                            @php
                                                $i++;
                                            @endphp
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        // show history modal
        $('.btn_show').on('click',function() {
            var expert_id = $(this).data('expert_id')
            var type = $(this).data('type')
            var date = $(this).data('date')

            $('#historyList').html('')

            $('#show_history .modal-body').html(`<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
              <span class="sr-only">Loading...</span>
            </div>`)
            $.ajax({
                type: 'POST',
                url: "{{ route('assign.history.show') }}",
                data: {
                    expert_id,
                    type,
                    date
                },
                success: function (res) {
                    console.log(res.history)
                    $('#show_history .modal-body').html(`
                    <h5>کارشناس: ${res.history[0].expert.name + ' ' + res.history[0].expert.family}</h5>
                    <table data-tw-merge class="table w-full rtl:text-right ltr:text-left border-b border-slate-200/60">
                        <tr data-tw-merge="" class="[&_td]:last:border-b-0">
                            <th data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">نام داوطلب</th>
                            <th data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">نوع</th>
                            <th data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">تاریخ</th>
                        </tr>
                        <tbody id="historyList">

                        </tbody>
                    </table>
`)
                    $.each(res.history, function (index, history) {
                        $('#historyList').append(`<tr data-tw-merge="" class="[&_td]:last:border-b-0">
                            <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">${history.phone.name + ' ' + history.phone.family}</td>
                            <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">${history.type}</td>
                            <td data-tw-merge=""
                                                    class="px-5 border-b dark:border-darkmode-300 border-dashed py-4 dark:bg-darkmode-600">${history.date}</td>
                           </tr>`)
                    })
                }
            })
        })
        // end show history modal
    </script>
@endsection