@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 sm:col-span-10 sm:col-start-2">
                        <div class="mt-7">
                            <form action="{{ route('phones.update', $phone) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <div class="box box--stacked flex flex-col">
                                    <div class="p-7">
                                        <div
                                                class="mt-5 block flex-col pt-5 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center">
                                            <div
                                                    class="mb-2 inline-block sm:mb-0 rtl:sm:ml-5 ltr:sm:mr-5 rtl:sm:text-left ltr:sm:text-right rtl:xl:ml-14 ltr:xl:mr-14 xl:w-60">
                                                <div class="rtl:text-right ltr:text-left">
                                                    <div class="flex items-center">
                                                        <div class="font-medium">نام کامل</div>
                                                        <div
                                                                class="rtl:mr-2.5 ltr:ml-2.5 rounded-md border border-slate-200 bg-slate-100 px-2 py-0.5 text-xs text-slate-500 dark:bg-darkmode-300 dark:text-slate-400">
                                                            ضروری
                                                        </div>
                                                    </div>
                                                    <div
                                                            class="mt-1.5 text-xs leading-relaxed text-slate-500/80 xl:mt-3">
                                                        نام کامل و رسمی خود را همانطور که در شناسنامه آورده شده است وارد
                                                        کنید
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3 w-full flex-1 xl:mt-0">
                                                <div class="flex flex-col items-center md:flex-row">
                                                    <input data-tw-merge="" type="text" placeholder="نام" name="name"
                                                           value="{{ old('name', $phone->name) }}"
                                                           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]:roundehidden 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 first:rounded-b-none last:-mt-px last:rounded-t-none focus:z-10 rtl:first:md:rounded-l-none ltr:first:md:rounded-r-none rtl:first:md:rounded-br-md ltr:first:md:rounded-bl-md rtl:last:md:-mr-px ltr:last:md:-ml-px last:md:mt-0 rtl:last:md:rounded-r-none ltr:last:md:rounded-l-none rtl:last:md:rounded-tl-md ltr:last:md:rounded-tr-md [&:not(:first-child):not(:last-child)]:-mt-px [&:not(:first-child):not(:last-child)]:roundehidden rtl:[&:not(:first-child):not(:last-child)]:md:-mr-px ltr:[&:not(:first-child):not(:last-child)]:md:-ml-px [&:not(:first-child):not(:last-child)]:md:mt-0">
                                                    <input data-tw-merge="" type="text" placeholder="نام خانوادگی"
                                                           name="family" value="{{ old('family', $phone->family) }}"
                                                           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]:roundehidden 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 first:rounded-b-none last:-mt-px last:rounded-t-none focus:z-10 rtl:first:md:rounded-l-none ltr:first:md:rounded-r-none rtl:first:md:rounded-br-md ltr:first:md:rounded-bl-md rtl:last:md:-mr-px ltr:last:md:-ml-px last:md:mt-0 rtl:last:md:rounded-r-none ltr:last:md:rounded-l-none rtl:last:md:rounded-tl-md ltr:last:md:rounded-tr-md [&:not(:first-child):not(:last-child)]:-mt-px [&:not(:first-child):not(:last-child)]:roundehidden rtl:[&:not(:first-child):not(:last-child)]:md:-mr-px ltr:[&:not(:first-child):not(:last-child)]:md:-ml-px [&:not(:first-child):not(:last-child)]:md:mt-0">
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                                class="mt-5 block flex-col pt-5 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center gap-5">
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class=" items-center md:flex-row my-2">
                                                    <label for="phone_number">شماره تماس</label>
                                                    <input data-tw-merge="" id="phone_number" type="text"
                                                           placeholder="09123456789"
                                                           name="phone_number"
                                                           value="{{ old('phone_number', $phone->phone_number) }}"
                                                           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]:roundehidden 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 ui-autocomplete-input">
                                                </div>
                                            </div>

                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="expert_id">کارشناس</label>
                                                    <select data-tw-merge="" name="expert_id" id="expert_id"
                                                            data-placeholder="جستجو"
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        <option selected>بدون کارشناس</option>
                                                        @foreach($experts as $expert)
                                                            <option
                                                                    value="{{ $expert->id }}" {{ $phone->expert_id == $expert->id ? 'selected' : ''}}>{{ $expert->fullName }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="type">نوع</label>
                                                    <select data-tw-merge="" name="type" id="type"
                                                            data-placeholder="جستجو"
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        @foreach(\App\Models\Phone::TYPE as $val)
                                                            <option
                                                                    value="{{ $val }}" {{ $phone->type == $val ? 'selected' : '' }}>{{ $val == 0 ? 'بدون نوع' : $val }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div
                                                class="mt-5 block flex-col pt-5 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center gap-5">
                                            <div class="mt-3 flex-col gap-2 w-full flex-1">
                                                <label for="takmil_variz_date">تاریخ واریز</label>

                                                <div class="relative mx-auto w-56">
                                                    <div
                                                            class="absolute flex h-full w-10 items-center justify-center rtl:rounded-r ltr:rounded-l border bg-slate-100 text-slate-500 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400">
                                                        <i
                                                                data-tw-merge
                                                                data-lucide="calendar"
                                                                class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
                                                        ></i>
                                                    </div>
                                                    <input
                                                            data-tw-merge name="takmil_variz_date"
                                                            id="takmil_variz_date"
                                                            type="text" data-single-mode="true" data-jdp
                                                            value="{{ $phone->takmil_variz ? \Verta::parse($phone->takmil_variz)->format('Y/m/d') : '' }}"
                                                            class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[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 [&amp;[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]:roundehidden group-[.input-group]:[&amp;: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 rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12">
                                                </div>
                                            </div>

                                            <div class="mt-3 flex-col gap-2 w-full flex-1">
                                                <label for="takmil_variz_time">ساعت واریز</label>
                                                <input data-tw-merge="" id="takmil_variz_time" type="text"
                                                       placeholder="12:00"
                                                       name="takmil_variz_time"
                                                       value="{{ $phone->takmil_variz ? \Verta::parse($phone->takmil_variz)->format('H:i') : '' }}"
                                                       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]:roundehidden 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 ui-autocomplete-input">
                                            </div>

                                            <div class="mt-3 w-full flex-1">
                                                <label for="assign_date">تاریخ تحویل</label>
                                                <div class="relative mx-auto w-56">
                                                    <div
                                                            class="absolute flex h-full w-10 items-center justify-center rtl:rounded-r ltr:rounded-l border bg-slate-100 text-slate-500 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400">
                                                        <i
                                                                data-tw-merge
                                                                data-lucide="calendar"
                                                                class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
                                                        ></i>
                                                    </div>
                                                    <input
                                                            data-tw-merge name="assign_date" id="assign_date"
                                                            type="text" data-single-mode="true" data-jdp
                                                            value="{{ $phone->date ? \Verta::parse($phone->date)->format('Y/m/d') : '' }}"
                                                            class="disabled:bg-slate-100 disabled:cursor-not-allowed dark:disabled:bg-darkmode-800/50 dark:disabled:border-transparent [&amp;[readonly]]:bg-slate-100 [&amp;[readonly]]:cursor-not-allowed [&amp;[readonly]]:dark:bg-darkmode-800/50 [&amp;[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 [&amp;[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]:roundehidden group-[.input-group]:[&amp;: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 rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12 rtl:pr-12 ltr:pl-12"
                                                    >
                                                </div>
                                            </div>

                                            <div class="mt-3 w-full flex-1">
                                                <label for="assign_time">ساعت تحویل</label>
                                                <input data-tw-merge="" id="assign_time" type="text"
                                                       placeholder="12:00"
                                                       name="assign_time"
                                                       value="{{ $phone->date ? \Verta::parse($phone->date)->format('H:i') : '' }}"
                                                       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]:roundehidden 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 ui-autocomplete-input">
                                            </div>
                                        </div>

                                        <div
                                                class="mt-5 block flex-col pt-5 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center gap-5">

                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="main_major">رشته اول</label>
                                                    <select data-tw-merge="" name="main_major" id="main_major"
                                                            data-placeholder="جستجو"
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        @foreach(\App\Models\Phone::getAllMajors() as $key => $value)
                                                            <option value="{{ $key }}"
                                                            @if($phone->majors)
                                                                {{ json_decode($phone->majors)[0] == $key ? 'selected' : '' }}
                                                                    @endif
                                                            @if(old('majors'))
                                                                {{ old('majors')[0] == $key ? 'selected' : '' }}
                                                                    @endif
                                                            >{{ $value }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="majors">رشته های تحصیلی</label>
                                                    <select name="majors[]" id="majors"
                                                            class="disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 mt-1 flex-1"
                                                            multiple="multiple">
                                                        @foreach(\App\Models\Phone::getAllMajors() as $key => $value)
                                                            <option value="{{ $key }}"
                                                            @if($phone->majors)
                                                                @foreach(json_decode($phone->majors) as $item)
                                                                    {{ $item == $key ? 'selected' : '' }}
                                                                        @endforeach
                                                                    @endif
                                                            @if(old('majors'))
                                                                @foreach(old('majors') as $item)
                                                                    {{ $item == $key ? 'selected' : '' }}
                                                                        @endforeach
                                                                    @endif
                                                            >{{ $value }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <p class="majors-error text-danger hidden">فقط می توانید یکی از 3 رشته
                                                    تجربی، ریاضی و انسانی را انتخاب کنید</p>
                                                <button type="button" class="btn btn-link" id="btn_clear">پاک کردن
                                                    رشته
                                                </button>
                                            </div>
                                        </div>
                                        <div
                                                class="mt-5 block flex-col pt-5 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center gap-5">
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-1/3">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="status">وضعیت</label>
                                                    <select data-tw-merge="" name="status" id="status"
                                                            data-placeholder="جستجو"
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        @if(auth()->user()->role != 'sale_manager' && auth()->user()->role != 'admin')
                                                            {{ $phone->status == 'takmil_variz' ? 'disabled' : ''}}
                                                        @endif>

                                                        @if($phone->status != 'ghole_variz' || $phone->status != 'adam_ghole_variz')
                                                            @if($phone->status != 'pending' && !subOfStatus($phone->status))
                                                                @canAny(['sale_manager','admin'])
                                                                    <option value="takmil_variz_1" {{ $phone->status == 'takmil_variz_1' ? 'selected' : '' }}>{{ \App\Models\Phone::STATUS['takmil_variz_1'] }}</option>
                                                                    <option value="takmil_variz_2" {{ $phone->status == 'takmil_variz_2' ? 'selected' : '' }}>{{ \App\Models\Phone::STATUS['takmil_variz_2'] }}</option>
                                                                    <option value="takmil_variz" {{ $phone->status == 'takmil_variz' ? 'selected' : '' }}>{{ \App\Models\Phone::STATUS['takmil_variz'] }}</option>
                                                                    @if($phone->status !== 'takmil_variz')
                                                                        <option
                                                                                value="{{ $phone->status }}" {{ $phone->status == 'adam_adam' || $phone->status == 'takmil_adam' ? 'selected' : '' }}>{{ \App\Models\Phone::getAllStatus()[$phone->status] }}</option>
                                                                    @endif
                                                                @else
                                                                    <option value="{{ $phone->status }}" selected
                                                                            class="{{ $phone->status ==  "ghole_variz" ? 'hidden' : '' }}">{{ \App\Models\Phone::getAllStatus()[$phone->status] }}</option>
                                                                @endcan
                                                            @endif
                                                        @endif
                                                        <option
                                                                value="ghole_variz" {{ $phone->status ==  "ghole_variz" ? 'selected' : '' }}>{{ \App\Models\Phone::STATUS['ghole_variz'] }}</option>
                                                        <option
                                                                value="adam_ghole_variz" {{ subOfStatus($phone->status) ? 'selected' : '' }}>{{ \App\Models\Phone::STATUS['adam_ghole_variz'] }}</option>
                                                    </select>
                                                    @php
                                                        $ins = [
                                                            1 => 'اول',
                                                            2 => 'دوم',
                                                            3 => 'سوم'
                                                        ];
                                                    @endphp
                                                    @if($phone?->user?->installments)
                                                        <div class="my-3">
                                                            @if($phone->user->installments()->count() > 0)
                                                                <strong>اقساط پرداخت شده : </strong>
                                                                @foreach($phone->user->installments()->whereStatus('success')->get() as $item)
                                                                    <p class="{{ $phone->status == 'takmil_variz' && $loop->last ? 'text-success' : ''  }}">
                                                                        قسط {{ $ins[$loop->iteration] }}
                                                                        : {{ number_format($item->amount) }} ریال</p>
                                                                @endforeach
                                                            @else
                                                                @if($lastPayment = $phone->user->payments()->where(['status' => 'success', 'pay_type' => 'cash'])->first())
                                                                    <strong class="text-success">مبلغ پرداخت شده : {{ number_format($lastPayment->amount) }} ریال</strong>
                                                                @endif
                                                            @endif
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <div
                                                    class="mt-3 flex-col gap-2 xl:mt-0 w-1/3 {{ subOfStatus($phone->status) ? '' : 'hidden' }}"
                                                    id="status2_sec">
                                                <div class="items-center md:flex-row my-2">
                                                    <label for="status2">وضعیت عدم قول واریز</label>
                                                    <select data-tw-merge="" name="status2" id="status2"
                                                            data-placeholder="جستجو"
                                                            class="tom-select disabled:bg-slate-100 disabled:cursor-not-allowed disabled:dark:bg-darkmode-800/50 [&[readonly]]:bg-slate-100 [&[readonly]]:cursor-not-allowed [&[readonly]]:dark:bg-darkmode-800/50 transition duration-200 ease-in-out w-full text-sm border-slate-200 shadow-sm rounded-md px-3 rtl:pl-8 ltr:pr-8 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 group-[.form-inline]:flex-1 mt-1 flex-1">
                                                        @foreach(\App\Models\Phone::STATUS2 as $key => $value)
                                                            <option
                                                                    value="{{ $key }}" {{ $phone->status == $key ? 'selected' : ''}}>{{ $value }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-1/3 installment-amount"
                                                 style="display: none;">
                                                <div class=" items-center md:flex-row my-2">
                                                    <label for="installment_amount">مبلغ قسط (ريال)</label>
                                                    <input data-tw-merge="" id="installment_amount" type="text"
                                                           placeholder="20000000"
                                                           name="installment_amount"
                                                           value="{{ old('installment_amount', '20000000') }}"
                                                           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]:roundehidden 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 ui-autocomplete-input">
                                                </div>
                                            </div>
                                        </div>

                                        <div
                                                class="signup-sms mt-2 block flex-col first:mt-0 first:pt-0 xl:flex-row xl:items-center gap-5 {{ array_key_exists($phone->status,\App\Models\Phone::STATUS2) ? 'hidden' : '' }}">
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-1/3">
                                                <div class="items-center md:flex-row my-2">
                                                    <button data-tw-merge data-type="signup"
                                                            data-id="{{ $phone->id }}" type="button"
                                                            class="sendSmsBtn 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 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&amp;:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70 w-full">
                                                        ارسال لینک ثبت نام
                                                    </button>
                                                </div>
                                                <div class="items-center md:flex-row my-2">
                                                    <button data-tw-merge onclick="copyToClipboard(this)" 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 bg-warning border-warning text-slate-900 dark:border-warning w-full">{{ env('APP_URL') . '/signup/' . $phone->phone_number }}</button>
                                                </div>
                                            </div>
                                        </div>

                                        <div
                                                class="sample-sms mt-2 flex flex-col first:mt-0 first:pt-0 xl:flex-row xl:items-center gap-5 {{ $phone->status != 'javab_nadadeh' ? 'hidden' : '' }}">
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <button data-tw-merge data-type="sample-1"
                                                            data-id="{{ $phone->id }}" type="button"
                                                            class="sendSmsBtn w-full 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 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&amp;:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70">
                                                        پیام آماده 1
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <button data-tw-merge data-type="sample-2"
                                                            data-id="{{ $phone->id }}" type="button"
                                                            class="sendSmsBtn w-full 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 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&amp;:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70">
                                                        پیام آماده 2
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                <div class="items-center md:flex-row my-2">
                                                    <button data-tw-merge data-type="sample-3"
                                                            data-id="{{ $phone->id }}" type="button"
                                                            class="sendSmsBtn w-full 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 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&amp;:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70">
                                                        پیام آماده 3
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div
                                                class="mt-3 block flex-col pt-2 first:mt-0 first:pt-0 sm:flex xl:flex-row xl:items-center gap-5">
                                            @php
                                                $history = $phone->history()->latest()->whereIn('change_to',['tamas_mojadad','mashverat'])->first()
                                            @endphp
                                            <div
                                                    class="mt-3 flex-col gap-2 xl:mt-0 w-full {{ $phone->status != 'tamas_mojadad' || $phone->status != 'mashverat' ? 'hidden' : ''}} next_call_sec">
                                                <div class=" items-center md:flex-row my-2">
                                                    <label for="next_call_date">تاریخ تماس مجدد</label>
                                                    <div class="relative">
                                                        <div
                                                                class="absolute flex h-full w-10 items-center justify-center rtl:rounded-r ltr:rounded-l border bg-slate-100 text-slate-500 dark:border-darkmode-800 dark:bg-darkmode-700 dark:text-slate-400">
                                                            <i
                                                                    data-tw-merge
                                                                    data-lucide="calendar"
                                                                    class="stroke-[1] w-5 h-5 h-4 w-4 h-4 w-4"
                                                            ></i>
                                                        </div>
                                                        <input data-tw-merge="" id="next_call_date" type="text"
                                                               data-single-mode="true"
                                                               name="next_call_date" data-jdp
                                                               value="{{ $history ? $history->next_call_date : null }}"
                                                               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]:roundehidden 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 rtl:pr-12 ltr:pl-12 ui-autocomplete-input">
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                    class="mt-3 flex-col gap-2 xl:mt-0 w-full {{ $phone->status != 'tamas_mojadad' ? 'hidden' : ''}} next_call_sec">
                                                <div class=" items-center md:flex-row my-2">
                                                    <label for="next_call_time">زمان تماس مجدد</label>
                                                    <input data-tw-merge="" id="next_call_time" type="text"
                                                           placeholder="12:00"
                                                           name="next_call_time"
                                                           value="{{ $history ? $history->next_call_time : null }}"
                                                           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]:roundehidden 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 ui-autocomplete-input">
                                                </div>
                                            </div>
                                            <div
                                                    class="custom-sms mt-2 flex flex-col first:mt-0 first:pt-0 xl:flex-row xl:items-center gap-5 {{ $phone->status != 'mashverat' ? 'hidden' : '' }}">
                                                <div
                                                        class="mt-3 flex-col gap-2 xl:mt-0 w-full">
                                                    <div class="items-center md:flex-row my-2">
                                                        <button type="button"
                                                                class="sendSmsBtn w-full 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 bg-dark border-dark text-white dark:bg-darkmode-800 dark:border-transparent dark:text-slate-300 [&amp;:hover:not(:disabled)]:dark:dark:bg-darkmode-800/70"
                                                                data-type="custom" id="btn_mashverat"
                                                                data-id="{{ $phone->id }}">پیام مشورت
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex flex-col justify-end gap-3 p-4 md:flex-row">
                                    <button data-tw-merge="" style="margin-left: auto" id="btn_save"
                                            class="transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 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-primary border-primary text-white dark:border-primary w-full rounded-[0.5rem] py-2.5 md:w-56">
                                        <i data-tw-merge="" data-lucide="pen-line"
                                           class="rtl:ml-2 ltr:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                        ذخیره
                                    </button>
                                    <a href="{{ url()->previous() }}" data-tw-merge=""
                                       class="transition duration-200 border shadow-sm inline-flex items-center justify-center px-3 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 text-slate-500 dark:border-darkmode-100/40 dark:text-slate-300 [&:hover:not(:disabled)]:bg-secondary/20 [&:hover:not(:disabled)]:dark:bg-darkmode-100/10 w-full rounded-[0.5rem] border-slate-300/80 bg-white/80 py-2.5 md:w-56"><i
                                                data-tw-merge="" data-lucide="pen-line"
                                                class="rtl:ml-2 ltr:mr-2 h-4 w-4 stroke-[1.3]"></i>
                                        لغو</a>
                                </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection
@section('script')
    <script>
        var current_status = "{{ $phone->status }}";
        let status = $('#status');
        let status2 = $('#status2');
        let btnSave = $('#btn_save');
        let signupSms = $('.signup-sms');
        let status2_sec = $('#status2_sec');
        let sampleSms = $('.sample-sms');
        let customSms = $('.custom-sms');
        let btnMashverat = $('#btn_mashverat');
        let nextCallSec = $('.next_call_sec');

        checkMajors();

        $(document).ready(function () {

            if (status.val() === 'ghole_variz') {
                signupSms.removeClass('hidden');

                @cannot(['admin', 'sale_manager'])
                if (status.val() !== current_status) {
                    btnSave.attr('disabled', 'disabled');
                } else {
                    btnSave.removeAttr('disabled');
                }
                @endcannot

            } else {
                if (status.val() == 'adam_ghole_variz') {
                    status2_sec.removeClass('hidden')

                    if (status2.val() == 'javab_nadadeh') {
                        sampleSms.removeClass('hidden')
                    } else {
                        sampleSms.addClass('hidden')
                    }

                    if (status2.val() == 'mashverat') {
                        customSms.removeClass('hidden')
                        // check if has nex call date and time enable the button
                        if ($('#next_call_date').val() == '' || $('input[name="next_call_time"]').val() == '') {
                            btnMashverat.attr('disabled', 'disabled');
                        } else {
                            btnMashverat.removeAttr('disabled');
                        }
                        {{--  $('.next_call_sec').removeClass('hidden')  --}}
                    } else {
                        customSms.addClass('hidden')
                        {{--  $('.next_call_sec').addClass('hidden')  --}}
                    }

                    if (status2.val() == 'tamas_mojadad' || status2.val() == 'mashverat') {
                        nextCallSec.removeClass('hidden')
                    } else {
                        nextCallSec.addClass('hidden')
                    }
                }
            }
            signupSms.addClass('hidden')

            @cannot(['admin', 'sale_manager'])

            if (status2.val() !== current_status) {
                if (status2.val() === 'mashverat' || status2.val() === 'javab_nadadeh') {
                    btnSave.attr('disabled', 'disabled');
                    // check if has nex call date and time enable the button
                    if ($('#next_call_date').val() == '' || $('input[name="next_call_time"]').val() == '') {
                        btnMashverat.attr('disabled', 'disabled');
                    } else {
                        btnMashverat.removeAttr('disabled');
                    }
                }
            } else {
                btnSave.removeAttr('disabled');
            }
            @endcannot


            // check if has nex call date and time enable the button
            $("#next_call_date, input[name='next_call_time']").change(function () {
                if ($('#next_call_date').val() == '' || $('input[name="next_call_time"]').val() == '') {
                    btnMashverat.attr('disabled', 'disabled');
                } else {
                    btnMashverat.removeAttr('disabled');
                }
            })

            status.on('change', function () {
                let self = $(this);
                if (self.val() === 'adam_ghole_variz') {
                    status2_sec.removeClass('hidden')
                    signupSms.addClass('hidden');

                    if (status2.val() == 'javab_nadadeh') {
                        sampleSms.removeClass('hidden')
                    } else {
                        sampleSms.addClass('hidden')
                    }

                    if (status2.val() == 'mashverat') {
                        customSms.removeClass('hidden')
                    } else {
                        customSms.addClass('hidden')
                    }

                    if (status2.val() == 'mashverat' || status2.val() == 'tamas_mojadad') {
                        nextCallSec.removeClass('hidden')
                    } else {
                        nextCallSec.addClass('hidden')
                    }

                    @cannot(['admin', 'sale_manager'])
                    if (status2.val() !== current_status) {
                        if (status2.val() === 'mashverat' || status2.val() === 'javab_nadadeh') {
                            btnSave.attr('disabled', 'disabled');
                        } else {
                            btnSave.removeAttr('disabled');
                        }
                    } else {
                        btnSave.removeAttr('disabled');
                    }
                    @endcannot

                }

                if (self.val() !== 'adam_ghole_variz') {
                    status2_sec.addClass('hidden')
                    sampleSms.addClass('hidden')
                    customSms.addClass('hidden')
                    nextCallSec.addClass('hidden')
                }


                if (self.val() === 'ghole_variz') {
                    if (self.val() !== current_status) {
                        btnSave.attr('disabled', 'disabled');
                    } else {
                        btnSave.removeAttr('disabled');
                    }
                    signupSms.removeClass('hidden')
                } else {
                    signupSms.addClass('hidden')
                }

                if (self.val().indexOf('takmil_variz') >= 0) {
                    $('.installment-amount').show();
                } else {
                    $('.installment-amount').hide();
                }

                if(self.val() == 'takmil_variz'){
                    $('#installment_amount').val('30000000')
                }
            })

            status.trigger('change')

            status2.on('change', function () {
                if ($(this).val() === 'tamas_mojadad' || $(this).val() === 'mashverat') {
                    nextCallSec.removeClass('hidden')
                } else {
                    nextCallSec.addClass('hidden')
                }

                if ($(this).val() == 'javab_nadadeh') {
                    sampleSms.removeClass('hidden')
                } else {
                    sampleSms.addClass('hidden')
                }

                if ($(this).val() == 'mashverat') {
                    customSms.removeClass('hidden')
                } else {
                    customSms.addClass('hidden')
                }

                @cannot(['admin', 'sale_manager'])
                if ($(this).val() === 'mashverat' || $(this).val() === 'javab_nadadeh') {
                    btnSave.attr('disabled', 'disabled');
                } else {
                    btnSave.removeAttr('disabled');
                }
                @endcannot

            })


            $('.sendSmsBtn').on('click', function () {
                let self = $(this)
                let btn_txt = self.text()
                let id = self.data('id')
                let type = self.data('type')
                let message = $('textarea[name="message"]').val();
                let next_call_date = $("#next_call_date").val();
                let next_call_time = $("input[name='next_call_time']").val();

                self.text('درحال ارسال...');
                self.attr('disabled', 'disabled')

                $.ajax({
                    type: 'POST',
                    url: '{{ route('sendSms') }}',
                    data: {
                        id: id,
                        type: type,
                        message: message,
                        next_call_date: next_call_date,
                        next_call_time: next_call_time,

                    }, success: function (res) {
                        self.text(btn_txt);
                        self.removeAttr('disabled');
                        btnSave.removeAttr('disabled');

                        Swal.fire({
                            title: 'پیامک ارسال شد',
                            icon: 'success',
                            showConfirmButton: false,
                            toast: true,
                            timer: 2000,
                            timerProgressBar: true,
                            position: 'top-start',
                            customClass: {
                                popup: 'my-toast',
                                icon: 'icon-center',
                                title: 'left-gap',
                                content: 'left-gap',
                            }
                        })
                    }
                })
            })

            //review
            var phone_id = {{ $phone->id }};
            $(document).on('change', '#review', function () {
                $.ajax({
                    type: 'PUT',
                    url: '{{ route('phones.review') }}',
                    data: {
                        phone_id: phone_id,
                    },
                    success: function (res) {
                        var title;
                        if (res.data.review) {
                            title = 'بازبینی فعال شد';
                        } else {
                            title = 'بازبینی غیرفعال شد';
                        }
                        Swal.fire({
                            title: title,
                            icon: 'success',
                            showConfirmButton: false,
                            toast: true,
                            timer: 2000,
                            timerProgressBar: true,
                            position: 'top-start',
                            customClass: {
                                popup: 'my-toast',
                                icon: 'icon-center',
                                title: 'left-gap',
                                content: 'left-gap',
                            }
                        })
                    }
                })
            })

            {{-- radio button deselect --}}
            $(document).on('click', "#btn_clear", function () {
                $("#majors").val([])
                $('.majors-error').addClass('hidden');
                btnSave.removeAttr('disabled');
                $(".lbl").removeClass('active');
            })
            {{-- end radio button deselect --}}

            $('select[name="majors[]"], select[name="main_major"]').on('change', function () {
                checkMajors();
            })
        })

        function checkMajors() {
            var array = ['riazi', 'ensani', 'tajrobi'];
            var main_major = $('select[name="main_major"]').val();

            if (array.includes(main_major)) {
                $.each($('select[name="majors[]"] option'), function (i, option) {
                    if (array.includes(option.value)) {
                        $(option).addClass('hidden')
                    } else {
                        $(option).removeClass('hidden')
                    }
                })
            } else {

                $.each($('select[name="majors[]"] option'), function (i, option) {
                    if (main_major == option.value) {
                        $(option).addClass('hidden')
                    } else {
                        $(option).removeClass('hidden')
                    }
                })
            }

            var common = $.grep(array, function (element) {
                return $.inArray(element, $('select[name="majors[]"]').val()) !== -1;
            });

            if (common.length >= 2) {
                $('.majors-error').removeClass('hidden');
                btnSave.attr('disabled', 'disabled');
            } else {
                $('.majors-error').addClass('hidden');
                btnSave.removeAttr('disabled');
            }
        }
    </script>
@endsection