@extends('frontend')
@section('stylesheet')
    <link href="{{ asset('assets/frontend/plugin/tags-input/tagsinput.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/frontend/css/tags.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/frontend/pages/css/shop.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')

    <div class="row justify-content-center pt-150-b" style="background-image: url({{ url('assets/frontend/img/bg-04.png') }});background-repeat: no-repeat;background-size: cover;background-position: center top;">
        <div class="col-12 col-md-12 col-lg-12" style="">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-md-10 col-lg-10">
                        <h4 class="mt-5"><b><img src="{{ url('assets/frontend/icon/home-pink.svg') }}" alt="" class="" style="height: 30px"> <span class="align-bottom"> กรอกข้อมูลเพื่อลงทะเบียน</span></b>
                                <span class="f-size-14 {{ isOnline($user->store) ? 'bg-green text-white ' : 'bg-gray text-black' }} rounded-pill py-2 px-3 d-none d-md-block" style="float: right">{!! isOnline($user->store) ? 'ONLINE |  '. dateSlat( $user->store->online_start ).' - '. dateSlat( $user->store->online_end )  : '<strong>OFFLINE</strong>' !!} </span>
                                {{-- <span class="f-size-14 text-body bg-gray rounded-pill py-2 px-3 d-none d-md-block" style="float: right">OFFLINE</span> --}}
                        </h4>
                        

                        <div class="mb-3">
                            <h5 class="mt-4"><b>ข้อมูลส่วนบุคคล</b> <span class="f-size-default">(สำหรับติดต่อ)</span></h5>
                        </div>

                        <div class="mb-5">
                            <form id="form-edit" action="#" class="g-3 needs-validation" novalidate  method="POST" enctype="multipart/form-data" action="{{ url('shop') }}">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                                {{-- <form class="g-3" novalidate> --}}
                                <div class="row">
                                    <div class="mb-2 col-md-6">
                                        <label for="name" class="form-label "><b>ชื่อ - นามสกุล</b>
                                            <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="fullname" name="fullname" value="{{ $user->name }}" placeholder=""
                                            required>
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <label for="exampleFormControlInput1" class="form-label "><b>อีเมล</b> <span
                                                class="text-danger">*</span></label>
                                        <input type="email" class="form-control" id="email" name="email" value="{{ $user->email }}"
                                            placeholder="" required>
                                        @if ($errors->any() )
                                            <small class="text-danger">{{ $errors->first() }}</small>
                                        @endif
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <label for="phone" class="form-label"><b>หมายเลขโทรศัพท์</b>
                                            <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="phone" name="phone" value="{{ $user->phone }}" placeholder=""
                                            required>
                                    </div>
                                </div>

                                <div class="row py-5 px-2">
                                    <div class="col-2 p-1">
                                        <div style="height: 5px;background:#FFCF15"></div>
                                    </div>
                                    <div class="col-2 p-1">
                                        <div style="height: 5px;background:#F66074"></div>
                                    </div>
                                    <div class="col-2 p-1">
                                        <div style="height: 5px;background:#83B91A"></div>
                                    </div>
                                    <div class="col-2 p-1">
                                        <div style="height: 5px;background: #00C2E5"></div>
                                    </div>
                                    <div class="col-2 p-1">
                                        <div style="height: 5px;background:#9758BF"></div>
                                    </div>
                                    <div class="col-2 p-1">
                                        <div style="height: 5px;background:#FF6C00"></div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <h5 class="mt-4"><b>ข้อมูลร้านค้า</b></h5>
                                </div>
                                <div class="row">
                                    <div class="mb-2 col-md-6">
                                        <label for="exampleFormControlInput1" class="form-label "><b>ชื่อร้านค้า</b>
                                            <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="store_name" name="store_name" value="{{ $user->store->name }}" placeholder=""
                                            required>
                                    </div>
                                    <link rel="stylesheet"
                                        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
                                    <div class="mb-2 col-md-6">
                                        <label for="exampleFormControlInput1"
                                            class="form-label d-block"><b>วันเปิด-ปิดร้าน</b> <span
                                                class="text-danger">*</span></label>
                                        <div class="ex-radio d-inline-block">
                                            <input type="radio" id="radio_one1" class="form-control" name="open" value="0"
                                                required {{ $user->store->open_day == 0 ? 'checked' : '' }}/>
                                            <span for="radio_one" class="radio_one" style="opacity:1">เปิดทุกวัน</span>
                                        </div>
                                        <div class="ex-radio d-inline-block ms-3">
                                            <input type="radio" id="radio_one1" class="form-control" name="open" value="1"
                                                required {{ $user->store->open_day == 1 ? 'checked' : '' }} />
                                            <span for="radio_one" class="radio_one" style="opacity:1">ระบุวันเปิด</span>
                                        </div>
                                    </div>


                                    @php
                                        $opened = $user->store->store_time;
                                        $days = $opened ? explode(',',$opened->open_days) : [];
                                        
                                    @endphp
                                    <div class="mb-2 col-md-6 box-day" style="{{ $user->store->open_day == 0 ? 'display: none' : '' }}">
                                        <label for="title-days-open"
                                            class="form-label d-block"><b>เลือกวัน</b></label>
                                        <div class="w-100">
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="จ" {{ in_array(1,$days) ? 'checked' : '' }} value="1">
                                                <label for="radio_one" class="radio_one "> จันทร์</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="อ" {{ in_array(2,$days) ? 'checked' : '' }} value="2">
                                                <label for="radio_one" class="radio_one"> อังคาร</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="พ" {{ in_array(3,$days) ? 'checked' : '' }} value="3">
                                                <label for="radio_one" class="radio_one"> พุธ</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="พฤ" {{ in_array(4,$days) ? 'checked' : '' }} value="4">
                                                <label for="radio_one" class="radio_one"> พฤหัสบดี</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="ศ" {{ in_array(5,$days) ? 'checked' : '' }} value="5">
                                                <label for="radio_one" class="radio_one"> ศุกร์</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="ส" {{ in_array(6,$days) ? 'checked' : '' }} value="6">
                                                <label for="radio_one" class="radio_one"> เสาร์</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-md-25 mb-2 btnCheck">
                                                <input type="checkbox" id="btnCheck" name="dayopen[]" data-id="อา" {{ in_array(0,$days) ? 'checked' : '' }} value="0">
                                                <label for="radio_one" class="radio_one"> อาทิตย์</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-0 col-md-12">
                                        <label for="title-open-time" class="form-label">
                                            <b>เลือกเวลาเปิด-ปิด</b><span class="text-danger">*</span>
                                        </label>
                                    </div>
                                    <div class="mb-2 col-12 col-md-3">
                                        
                                        <div class="form-group">
                                            <div class='input-group date datepicker' id='datetimepicker-open'>
                                                <input type='text' class="form-control" id="timepicker-open" name="open_time" value="{{ $user->store->store_time ? $user->store->store_time->open_time : '' }}" placeholder="เปิด 00:00" required/>
                                                <span class="input-group-text input-group-addon" id="basic-addon2"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-2 col-12 col-md-3">
                                        <div class="form-group">
                                            <div class='input-group date' id='datetimepicker-close'>
                                                <input type='text' class="form-control" id="timepicker-close" name="close_time" value="{{ $user->store->store_time ? $user->store->store_time->close_time : '' }}" placeholder="ปิด 00:00" required/>
                                                <span class="input-group-text input-group-addon" id="basic-addon2"><i class="fa fa-clock-o" aria-hidden="true"></i></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-12 col-md-6">
                                        <div class="box-sum">
                                            เปิดทุกวัน
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div>เวลาเปิด - ปิด :
                                            <span class="dd-open">{{ $user->store->store_time ? $user->store->store_time->open_time : '' }}</span> - 
                                            <span class="dd-close">{{ $user->store->store_time ? $user->store->store_time->close_time : '' }}</span>
                                        </div>
                                    </div>
                                </div>                               
                               
                                <hr class="mt-1">
                                <div class="row mt-3">
                                    <div class="mb-2 col-md-6">
                                        <label for="exampleFormControlInput1" class="form-label "><b>ประเภทร้านค้า</b>
                                        <span class="text-danger">*</span></label>
                                        <select class="form-select" aria-label="Default select example" id="category_id" name="category_id" required>
                                            <option value="" >เลือกประเภทร้านค้าของคุณ</option>
                                            @if ($category)
                                                @foreach ($category as $item)
                                                    <option value="{{ $item->id }}" data-tags="{{ tagsList($item->tags) }}" {{ $user->store->category_id == $item->id ? 'selected' : ''}}>{{ $item->name }}</option>
                                                @endforeach
                                            @endif 
                                        </select>
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <label for="exampleFormControlInput1"
                                            class="form-label d-block"><b>ระบุแท็กที่เกี่ยวข้องกับสินค้า</b>
                                        </label>
                                        {{-- <div class="form-control bg-white" id="tags">
                                            @php
                                                $tags = explode(',', $user->store->tags );
                                            @endphp
                                            @if ($tags)
                                                <ul class="ti-tags">
                                                    @foreach ($tags as $idx => $tag)
                                                        <li tabindex="{{ $idx }}" class="ti-tag ti-valid">
                                                            <div class="ti-content">
                                                                <div class="ti-tag-center">
                                                                    <span>{{ $tag }}</span>
                                                                </div>
                                                            </div>
                                                            <div class="ti-actions pointer" data-tag="{{ $tag }}">
                                                                <i class="fa fa-times"></i>
                                                            </div>
                                                        </li>
                                                @endforeach
                                                </ul> 
                                            @endif
                                        </div> --}}
                                        {{-- <input type="hidden" name="tags" id="keys-tag" value="{{ $user->store->tags }}"> --}}
                                        <input type="text" class="form-control" id="tags-key" data-role="tagsinput" value="{{ $user->store->tags }}" name="tags" placeholder=""/>
                                        {{-- <tags-input element-id="tags" v-model="selectedTags"></tags-input> --}}
                                    </div>
                                    <div class="mb-2 col-md-12">
                                        <label for="exampleFormControlInput1"
                                            class="form-label d-block"><b>รายละเอียดร้านค้า</b>
                                            <span class="text-danger">*</span>
                                        </label>
                                        <textarea class="form-control" id="description" maxlength="500" name="description" rows="3"
                                            required>{!! $user->store->description !!}</textarea>
                                            <div class="text-gray text-right" style="color:#ced4da; text-align:right;"><small class="text-right text-gray" id="len-description">0/100</small></div>
                                    </div>
                                    <div class="mb-2 col-md-3">
                                        <label for="title-price" class="form-label">
                                            <b>ช่วงราคา</b>
                                        </label>
                                        <input type="text" class="form-control number" id="price_start" name="price_start"
                                            placeholder="0 บาท" value="{{ $user->store->price_start }}">
                                    </div>
                                    <div class="mb-2 col-md-3">
                                        <label for="price_end" class="form-label">.</label>
                                        <input type="text" class="form-control number" id="price_end" name="price_end"
                                            placeholder="100 บาท" value="{{ $user->store->price_end }}">
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <label for="exampleFormControlInput1" class="form-label d-block"><b>ลักษณะสินค้า</b></label>
                                        <div class="ex-radio d-inline-block">
                                            <input type="radio" id="product_type1" class="form-control" name="product_type" value="1" {{ $user->store->product_type == 1 ? 'checked' : '' }} />
                                            <span for="product_type1" class="radio_one" style="opacity:1">มือหนึ่ง</span>
                                        </div>
                                        <div class="ex-radio d-inline-block ms-3">
                                            <input type="radio" id="product_type2" class="form-control" name="product_type" value="2" {{ $user->store->product_type == 2 ? 'checked' : '' }} />
                                            <span for="product_type2" class="radio_one" style="opacity:1">มือสอง</span>
                                        </div>
                                    </div>
                                    <div class="mb-2 col-md-12">
                                        <label for="exampleFormControlInput1" class="form-label d-block"><b>โปรโมชั่น</b>
                                        </label>
                                        <textarea class="form-control"  id="promotion" name="promotion" maxlength="500" rows="3"
                                            >{!! $user->store->promotion !!}</textarea>
                                        <div class="text-gray text-right" style="color:#ced4da; text-align:right;"><small class="text-right text-gray" id="len-promotion">0/100</small></div>

                                    </div>
                                    <div class="mb-0 col-md-12">
                                        <label for="exampleFormControlInput1" class="form-label d-block"><b>ที่อยู่่ร้านค้า</b>
                                            <span class="text-danger">*</span>
                                            <span class="text-gray ml-3 pl-4" style="color:#ced4da; padding-left: 1rem;">กรุณาเลือกจังหวัดก่อนเพื่อความสะดวกในการกรอกข้อมูล</span>
                                        </label>
                                      
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <input type="text" class="form-control" id="address" name="address"
                                            placeholder="เลขที่" required value="{{ $user->store->address1 }}">
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <input type="text" class="form-control" id="address2" name="address2"
                                            placeholder="หมู่บ้าน/อาคาร/ถนน" value="{{ $user->store->address2 }}">
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <select class="form-control selected2" required name="province" id="province" placeholder="Province *" required>
                                            <option value="">- เลือกจังหวัด -</option>
                                           @foreach (province_rows() as $item )
                                               <option value="{{ $item->id }}" {{ $user->store->province_id == $item->id ? 'selected' : '' }}>{{ province_name($item) }}</option>
                                           @endforeach
                                       </select>
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        
                                        <select class="form-control" required name="city" id="city" required>
                                            <option value="">- เลือกเขต/อำเภอ -</option>
                                            <option value="{{ $user->store->city_id }}" selected>{{  getAmphure_name( $user->store->city_id ) }}</option>

                                        </select>
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <select class="form-control" required name="district" id="district" required>
                                            <option value="">- เลือกแขวง/ตำบล -</option>
                                            <option value="{{ $user->store->district_id }}" selected>{{  getDistrict_name( $user->store->district_id ) }}</option>
                                        </select>
                                    </div>
                                    <div class="mb-2 col-md-6">
                                        <input type="text" class="form-control" id="zipcode" name="zipcode"
                                            placeholder="รหัสไปรษณีย์" required value="{{ $user->store->zipcode }}">
                                    </div>
                                    
                                    <div class="mb-2 col-md-12">
                                        <label for="exampleFormControlInput1"
                                            class="form-label d-block"><b>กรอกลิ้งค์ตำแหน่งที่ตั้งบนแผนที่</b>
                                        </label>
                                        <input type="text" class="form-control" id="google_map" name="google_map"
                                            placeholder="Google map" value="{{ $user->store->map }}">
                                    </div>
                                    <div class="mb-0 col-md-12">
                                        <label for="exampleFormControlInput1"
                                            class="form-label d-block"><b>หมายเลขโทรศัพท์ร้านค้า</b>
                                            <span class="text-danger">*</span>
                                        </label>
                                    </div>
                                    <div class="mb-2 col-6 col-md-6">                                       
                                        <input type="text" class="form-control" id="store_phone1" name="store_phone1"
                                            placeholder="000-000-0000" required value="{{ $user->store->phone1 }}" required>
                                    </div>
                                    <div class="mb-2 col-6 col-md-6">
                                        <input type="text" class="form-control" id="store_phone2" name="store_phone2"
                                            placeholder="000-000-0000" value="{{ $user->store->phone2 }}">
                                    </div>
                                    @php
                                        $facilities = explode(',', $user->store->facilities);
                                    @endphp
                                    <div class="mt-3 mb-2 col-md-12">
                                        <label for="title-facilities"
                                            class="form-label d-block"><b>สิ่งอำนวยความสะดวก</b></label>
                                        <div class="w-100">
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_parking" name="facilities[]" value="parking" {{ in_array('parking', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_parking" class="radio_one"> ที่จอดรถ</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_credit_card" name="facilities[]" value="credit_card"  {{ in_array('credit_card', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_credit_card" class="radio_one"> บัตรเครดิต</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_delivery_service" name="facilities[]" value="delivery_service"  {{ in_array('delivery_service', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_delivery_service" class="radio_one"> บริการจัดส่่ง, เดลิเวอรี่</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_free_wifi" name="facilities[]" value="free_wifi" {{ in_array('free_wifi', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_free_wifi" class="radio_one"> Free Wifi</label>
                                            </div>
                                        </div>
                                        <div class="w-100 mt-2">
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_dining_table" name="facilities[]" value="dining_table"  {{ in_array('dining_table', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_dining_table" class="radio_one"> โต๊ะอาหาร</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_drive_thru" name="facilities[]" value="drive_thru" {{ in_array('drive_thru', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_drive_thru" class="radio_one"> Drive Thru</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_wheelchair" name="facilities[]" value="wheelchair"  {{ in_array('wheelchair', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_wheelchair" class="radio_one"> ทางรถวิลแชร์</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_air_conditioner" name="facilities[]" value="air_conditioner" {{ in_array('air_conditioner', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_air_conditioner" class="radio_one"> เครื่องปรับอากาศ</label>
                                            </div>
                                            <div class="ex-checkbox d-inline-block w-100 w-md-25 mb-2">
                                                <input type="checkbox" id="facilities_pre_order" name="facilities[]" value="pre_order" {{ in_array('pre_order', $facilities ) ? 'checked' : '' }} />
                                                <label for="facilities_pre_order" class="radio_one"> สั่งสินค้าล่วงหน้า</label>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="mt-3 mb-2 col-md-12">
                                        <label for="title-connect"
                                            class="form-label d-block"><b>ช่องทางติดต่อร้านค้า</b></label>
                                    </div>
                                    @php
                                        $social = json_decode( $user->store->socials );
                                        // printr($social->tiktok);
                                    @endphp
                                    <div class="mb-2 col-md-12 position-relative">
                                        <img src="{{ url('assets/frontend/icon/facebook.svg') }}" alt="" class="d-block d-md-none" style="height:32px;left: 12px;position:absolute;">
                                        <img src="{{ url('assets/frontend/icon/so1.svg') }}" alt="" class="d-none d-md-block"  style="height:37px;position:absolute;left:12px">
                                        <div class="pl-180">
                                            <div class="row">
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <input type="text" class="form-control" id="facebook_link" name="socials[facebook][link]" placeholder="Link" value="{{ @$social->facebook->link }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="facebook_name" name="socials[facebook][name]" placeholder="Name" value="{{ @$social->facebook->name }}">
                                                </div>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <div class="mb-2 col-md-12 position-relative">
                                        <img src="{{ url('assets/frontend/icon/twitter.svg') }}" alt="" class="d-block d-md-none" style="height:32px;left: 12px;position:absolute;">
                                        <img src="{{ url('assets/frontend/icon/so2.svg') }}" alt="" class="d-none d-md-block"  style="height:37px;position:absolute;left:12px">
                                        <div class="pl-180">
                                            <div class="row">
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <input type="text" class="form-control" id="twitter_link" name="socials[twitter][link]" placeholder="Link" value="{{ @$social->twitter->link }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="twitter_name" name="socials[twitter][name]" placeholder="Name" value="{{ @$social->twitter->name }}">
                                                </div>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <div class="mb-2 col-md-12 position-relative">
                                        <img src="{{ url('assets/frontend/icon/line.svg') }}" alt="" class="d-block d-md-none" style="height:32px;left: 12px;position:absolute;">
                                        <img src="{{ url('assets/frontend/icon/so3.svg') }}" alt="" class="d-none d-md-block"  style="height:37px;position:absolute;left:12px">
                                        <div class="pl-180">
                                            <div class="row">
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <input type="text" class="form-control" id="line_link" name="socials[line][link]" placeholder="Link" value="{{ @$social->line->link }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="line_name" name="socials[line][name]" placeholder="Name" value="{{ @$social->line->name }}">
                                                </div>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <div class="mb-2 col-md-12 position-relative">
                                        <img src="{{ url('assets/frontend/icon/youtube.svg') }}" alt="" class="d-block d-md-none" style="height:32px;left: 12px;position:absolute;">
                                        <img src="{{ url('assets/frontend/icon/so4.svg') }}" alt="" class="d-none d-md-block"  style="height:37px;position:absolute;left:12px">
                                        <div class="pl-180">
                                        <div class="row">
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <input type="text" class="form-control" id="youtube_link" name="socials[youtube][link]" placeholder="Link" value="{{ @$social->youtube->link }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="youtube_name" name="socials[youtube][name]" placeholder="Name" value="{{ @$social->youtube->name }}">
                                                </div>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <div class="mb-2 col-md-12 position-relative">
                                        <img src="{{ url('assets/frontend/icon/instargram.svg') }}" alt="" class="d-block d-md-none" style="height:32px;left: 12px;position:absolute;">
                                        <img src="{{ url('assets/frontend/icon/so5.svg') }}" alt="" class="d-none d-md-block"  style="height:37px;position:absolute;left:12px">
                                        <div class="pl-180">
                                        <div class="row">
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <input type="text" class="form-control" id="instagram_link" name="socials[instagram][link]" placeholder="Link" value="{{ @$social->instagram->link }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text" class="form-control" id="instagram_name" name="socials[instagram][name]" placeholder="Name" value="{{ @$social->instagram->name }}">
                                                </div>
                                            </div>
                                        </div>                                        
                                    </div>
                                    <div class="mb-2 col-md-12 position-relative">
                                        <img src="{{ url('assets/frontend/icon/tiktok.svg') }}" alt="" class="d-block d-md-none" style="height:32px;left: 12px;position:absolute;">
                                        <img src="{{ url('assets/frontend/icon/so6.svg') }}" alt="" class="d-none d-md-block"  style="height:37px;position:absolute;left:12px">
                                        <div class="pl-180">
                                        <div class="row">
                                                <div class="col-md-6 mb-2 mb-md-0">
                                                    <input type="text"  class="form-control" id="tiktok_link" name="socials[tiktok][link]" placeholder="Link" value="{{ @$social->tiktok->link }}">
                                                </div>
                                                <div class="col-md-6">
                                                    <input type="text"  class="form-control" id="tiktok_name" name="socials[tiktok][name]" placeholder="Name" value="{{ @$social->tiktok->name }}">
                                                </div>
                                            </div>
                                        </div>                                        
                                    </div>

                                    <div class="mb-2 col-md-12">
                                        <div class="mt-4">
                                            <h5><b>อัพโหลดรูปภาพ</b> <span class="f-size-default"> (ขนาดไฟล์ไม่เกิน 1
                                                    MB/รูป,
                                                    อัพโหลดได้ไม่เกิน 10 รูป)</span></h5>
                                        </div>
                                        
                                        <div class="" id="image-preview">
                                            <input type="file" name="images[]" accept="image/*" id="inputFile" class="upload-file" multiple />
                                            <div class="row" id="image-preview-list"></div>
                                        </div> 
                                        @if (count($user->store->images ) > 0)
                                            <div class="px-2 py-3">
                                                <ul class="row" id="image-list">
                                                    @foreach ($user->store->images as $image)
                                                        <li class="col-3 col-md-1 p-1 list-image" data-id="{{ $image->id }}" id="store-image-{{ $image->id }}">
                                                            <div class="image-preview">
                                                                <img src="{{ asset( $image->path . $image->filename ) }}" class="hover-shadow cursor rounded">
                                                                <a href="#" data-id="{{ $image->id }}" class="remove-image text-danger"><i class="fa fa-times" aria-hidden="true"></i></a>
                                                            </div>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        @endif

                                        <div>
                                            <button id="btn-upload" type="button" class="rounded-pill border-0 px-4 px-md-5 py-2"
                                                style="background-color: #FFCF15">
                                                <i class="fa fa-upload" aria-hidden="true"></i> เพิ่มไฟล์
                                            </button>
                                            <span class="text-black-50 count-upload">อัพโหลดแล้ว {{ count($user->store->images ) }} รูป</span>
                                        </div>
                                        <hr class="mt-5">
                                    </div>
                                    <div class="mb-2 col-md-2 text-center text-md-left">
                                        <img src="{{ url('assets/frontend/icon/market-qrcode.png') }}" alt="" class="w-100 w-100-res">
                                    </div>
                                    <div class="mb-2 col-md-10 align-self-center">
                                        <div><b>ติดต่อสอบถาม</b></div>
                                        <div>สอบถามปัญหาการลงทะเบียน จันทร์-ศุกร์ 09.00 - 17.00 น.</div>
                                        <div>id Line : @meedeelaetook</div>
                                        {{-- <div>id Line : mgbestautosales</div> --}}
                                        <div>ลิงค์แอดไลน์ : <a href="https://lin.ee/KOnHR2W" class="text-body"
                                                target="_blank">https://lin.ee/KOnHR2W</a> </div>
                                    </div>
                                    <div class="mb-3 mt-5 col-md-12">
                                        <div class="ex-checkbox">
                                            <input type="checkbox" id="radio_agree" name="agree" checked value="1" required>
                                            <label for="radio_agree" class="radio_one"> ข้าพเจ้ายอมรับ
                                                <a href="" class="text-danger" data-bs-toggle="modal"
                                                    data-bs-target="#Modal-policy">ข้อตกลงและเงื่อนไข
                                                    รับทราบนโยบายความเป็นส่วนตัว</a> <br>
                                                I have read and agree <a href="" class="text-danger" data-bs-toggle="modal"
                                                    data-bs-target="#Modal-policy">Terms of Use and acknowledged with the
                                                    Privacy Policy</a>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-5 text-center text-md-end">
                                    <button type="submit"
                                        class="rounded-pill a-close text-decoration-none text-white border-0 text-center button-cancle"
                                        style="">
                                        ยกเลิก
                                    </button>
                                    <button type="submit"
                                        class="rounded-pill a-regis text-decoration-none text-white border-0 text-center button-submit"
                                        style="" >
                                        ส่งข้อมูล
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
<!-- Modal -->
@section('modals')
    @include('frontend.modals.policy')
    @include('frontend.modals.register-success')
    @include('frontend.modals.shop-update', ['modify' => $modify])

@endsection

@section('src-javascript')
    <script src="{{ asset('assets/frontend/plugin/tags-input/tagsinput.js') }}"></script>    
@endsection

@section('javascript')
    <script>
        var _token = "{{ csrf_token() }}";
        var base_url = "{{ url('/') }}";
    </script>
    <script src="{{ asset('assets/frontend/js/select-province.js') }}"></script>
    <script src="{{ asset('assets/frontend/js/upload-multiple.js') }}"></script>
    <script src="{{ asset('assets/frontend/pages/js/shop.js') }}"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="text/javascript">
        async function removeImage(id){
            const url   = `{{ url('remove-file/') }}/${id}`;
            let data    = {_token : '{{ csrf_token() }}' };
            let res;
            try {
                res = await $.ajax({
                    url : url,
                    type : 'POST',
                    data : data,
                    dataType : 'json'
                });
                if( res ){
                    if( res.status == 'success' ){
                        $(`#store-image-${id}`).remove();
                            let inputFiles  = document.getElementById("inputFile").files;
                            let lenFile     = Number( inputFiles.length ); // + Number(imgLen);
                            $('.count-upload').html(`อัพโหลดแล้ว ${ lenFile } รูป`);
                    }
                }
            } catch (error) {
                console.log(error);  
            }
        }
    
    function imageSort(id,sortNo){
        let sortUrl = `${base_url}/shop/sortable/${id}`;

        $.ajax({
            url : sortUrl,
            data : {_token : _token, sortNo : sortNo },
            type : 'POST',
            success : function(res){
                console.log('response true');
            }
        });
    }
    (function($){
        $('.remove-image').on('click',function(e){
            e.preventDefault();
            const id = $(this).data('id');
            console.log('remove image id ', id);
            removeImage(id);
        });

        var cancel_url = "{{ url('shop/remove-update/') }}";
        $('.shop-modify-cancel').on('click',function(e){
            e.preventDefault();
            const id = $(this).data('id');
            if( !confirm('ท่านแน่ใจว่าต้องการยกเลิกคำร้องเพื่อปรับปรุงข้อมูลร้านค้า')) return false;
            location.href = `${cancel_url}/${id}`;
        })
        $("#image-list").sortable({
            // items:'',
            update:function(e,ui){
                $('li.list-image').each(function(i,v){
                    let id = $(this).data('id');
                    let no = Number(i)+1;
                    // console.log('e : ', e ,' ui : ', ui);
                    imageSort(id,no);
                    console.log('id : ', id ,' sortable : ', no );
                })
            }
        });
        $("#image-list").disableSelection();

        $("#image-preview-list").sortable();
        $("#image-preview-list").disableSelection();

    }(jQuery));
    </script>
    
    @if ( $modify )
    <script>
        (function($){
            var modalSuccess = new bootstrap.Modal(document.getElementById('Modal-shop-update'), {
                    keyboard: false
                });
            modalSuccess.show();
        }(jQuery));
    </script>
    @endif
    
    @if (session('status') == 'success' || $user->store )
        <script>
            (function($){
                var modalSuccess = new bootstrap.Modal(document.getElementById('Modal-success'), {
                        keyboard: false, backdrop : 'static'
                    });
                // modalSuccess.show();
            }(jQuery));
        </script>
    @endif
@endsection