@include('common.messages')
@include('common.errors')

@if(isset($is_edit))
<div class="mb-3">
    <label class="form-label">Monitor Key</label><br/>
    <label class="text-danger">{{ $monitor->monitor_key ?? '' }}</label>
</div>
@endif


<div class="mb-3">
    <label class="form-label" for="sites">Choose Site</label>
    {!! Form::select('site_id', [0 => 'Select Site'] + $sites, old('site_id', (isset($monitor->site_id) && $monitor->site_id) ? $monitor->site_id : ''), ['class' => 'form-control', 'id' => 'site_id']) !!}
</div>

<div class="mb-3">
    <label class="form-label" for="servey">Choose Servey</label>
    {!! Form::select('servey_id', [0 => 'Select Servey'] + $servey, old('servey_id', (isset($monitor->servey_id) && $monitor->servey_id) ? $monitor->servey_id : ''), ['class' => 'form-control', 'id' => 'servey_id']) !!}
</div>

<div class="mb-3">
    <label class="form-label" for="basic-default-fullname">Monitor Number</label>
    <input type="text" name="monitor_number" class="form-control" id="monitor_number" placeholder="Monitor Number" value="{{ $monitor->monitor_number ?? old('monitor_number') }}" />
</div>
<div class="mb-3">
    <label class="form-label" for="inbuild-location">Inbuild Location</label>
    <textarea name="inbuild_location" class="form-control" placeholder="Inbuild Location">{{ $monitor->inbuild_location ?? old('inbuild_location') }}</textarea>
</div>

<div class="mb-3">
    <label class="form-label" for="build-location">Build Location</label>
    <textarea name="build_location" class="form-control" placeholder="Build Location">{{ $monitor->build_location ?? old('build_location') }}</textarea>
</div>

@if(isset($is_edit))
<div class="mb-3">
    <label class="form-label" for="build-location">Web URL</label>
    <input type="text" class="form-control" value='{{url("give-rating/$encode_monitor_id")}}' id="copyText">
    <i class="fa fa-copy" onclick="copyText('copyText')">Copy</i>
</div>

<div class="mb-3">
    <label class="form-label" for="build-location">Web iFrame</label>
    <textarea id="iframe_code" class="form-control" rows="1"><iframe src='{{url("give-rating/$encode_monitor_id")}}'></iframe></textarea>
    <i class="sh-btn" onclick="copyText('iframe_code');">Copy</i>
    <!-- <iframe src="index.html" allow="clipboard-read self https://trustedsite.com/somefolder/index.html"></iframe> -->
</div>

@endif

{{-- <div class="mb-3">
    <label class="form-label">Configuration</label>
</div>

<div class="row g-3 mb-3">
    <div class="col">
        <label class="form-label">Date Style</label>
    </div>
    <div class="col">
        <div class="col-md">
            <div class="form-check form-check-inline mt-3">
                <input name="date_format" class="form-check-input" type="radio" value="1" id="defaultRadio1" checked> 
                <label class="form-check-label" for="inlineRadio1">dd/mm/yy</label>
            </div>
            <div class="form-check form-check-inline">
                <input name="date_format" class="form-check-input" type="radio" value="2" id="defaultRadio2" >
                <label class="form-check-label" for="inlineRadio2">mm/dd/yy</label>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col">
        <label class="form-label">Clock Style</label>
    </div>
    <div class="col">
        <div class="col-md">
            <div class="form-check form-check-inline mt-3">
                <input name="clock_format" class="form-check-input" type="radio" value="1" id="defaultRadio1" >
                <label class="form-check-label" for="defaultRadio1"> 12 hr </label>
            </div>
            <div class="form-check form-check-inline">
                <input name="clock_format" class="form-check-input" type="radio" value="2" id="defaultRadio2" >
                <label class="form-check-label" for="defaultRadio2"> 24 hr </label>
            </div>
        </div>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col">
        <label class="form-label">Show Advertise</label>
        <div>
            <div class="mb-3 advertise-image-div" id="AdvertImgDiv"  >
                <label for="formFile" class="form-label text-light fw-semibold d-block">Choose advertise image</label>
                <input class="form-control" type="file" id="formFile" name="advertise_img">
            </div>
            <div class="mt-2">
            @if(isset($config))
                    @if(!empty($config['advertise']))
                        <a href="{{url($config['advertise']->image)}}" target="_blank"> View advertise </a>
                    @endif
                @endif
            </div>
        </div>
    </div>
    <div class="col">
        <div class="col-md form-check form-switch mb-2">
            <input class="form-check-input" type="checkbox" name="dispaly_advertise" onclick='handleDisplayBlock(this,"AdvertImgDiv");' >
            <label class="form-check-label" for="flexSwitchCheckChecked">Display advertise</label>
        </div>
    </div>
</div> --}} 

{{-- <div class="mb-3">
    <label class="form-label" for="build-location">Configuration</label>
    <div class="accordion mt-3" id="accordionConfig">
        <div class="card accordion-item active1">
            <h2 class="accordion-header" id="headingOne">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionOne" aria-expanded="true" aria-controls="accordionOne">
                Date Style
            </button>
            </h2>
            <div id="accordionOne" class="accordion-collapse collapse show1" data-bs-parent="#accordionExample" style="">
                <div class="accordion-body mb-3">
                    <!-- <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="DateStyleID" onclick='handleDisplayBlock(this,"DateRadioDiv");'>
                        <label class="form-check-label" for="flexSwitchCheckChecked">Select date display style</label>
                    </div> -->
                    <div class="date-radio-buttons" id="DateRadioDiv">
                        <div class="form-check">
                            <input name="date_format" class="form-check-input" type="radio" value="1" id="defaultRadio1" checked>
                            <label class="form-check-label" for="defaultRadio2"> dd/mm/yy </label>
                        </div>
                        <div class="form-check">
                            <input name="date_format" class="form-check-input" type="radio" value="2" id="defaultRadio2" >
                            <label class="form-check-label" for="defaultRadio2"> mm/dd/yy </label>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
        <div class="card accordion-item">
            <h2 class="accordion-header" id="headingTwo">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionTwo" aria-expanded="false" aria-controls="accordionTwo">
                Clock Style
            </button>
            </h2>
            <div id="accordionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" style="">
                <div class="accordion-body mb-3">
                    <!-- <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" id="ClockStyleID" onclick='handleDisplayBlock(this,"ClockRadioDiv");'>
                        <label class="form-check-label" for="flexSwitchCheckChecked">Select Clock Style</label>
                    </div> -->
                    <div class="clock-radio-buttons" id="ClockRadioDiv">
                        <div class="form-check">
                            <input name="clock_format" class="form-check-input" type="radio" value="1" id="defaultRadio1" >
                            <label class="form-check-label" for="defaultRadio1"> 12 hr </label>
                        </div>
                        <div class="form-check">
                            <input name="clock_format" class="form-check-input" type="radio" value="2" id="defaultRadio2" >
                            <label class="form-check-label" for="defaultRadio2"> 24 hr </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card accordion-item">
            <h2 class="accordion-header" id="headingThree">
            <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordionThree" aria-expanded="false" aria-controls="accordionThree">
                Show Advertise
            </button>
            </h2>
            <div id="accordionThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="dispaly_advertise" onclick='handleDisplayBlock(this,"AdvertImgDiv");' >
                        <label class="form-check-label" for="flexSwitchCheckChecked">Display advertise</label>
                    </div>
                    <div>
                        <div class="mb-3 advertise-image-div" id="AdvertImgDiv"  >
                            <label for="formFile" class="form-label">Choose advertise image</label>
                            <input class="form-control" type="file" id="formFile" name="advertise_img">
                            
                            @if(isset($config))
                                @if(!empty($config['advertise']))
                                    <a href="{{url($config['advertise']->image)}}" target="_blank"> View advertise </a>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}

@section('scripts')
<script src="{{ asset('admin/js/monitor.js') }}"></script>
<script>
function copyText(id) {
  /* Get the text field */
  var copyText = document.getElementById(id);

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

   /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value);

} 

</script>
@endsection