@extends('layouts.app')
@include('plugins.dropify')
@include('plugins.wizard')

@section('content')
<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                <h3 class="content-header-title">Edit Device</h3>
                <div class="row breadcrumbs-top">
                    <div class="breadcrumb-wrapper col-12">
                        {{ Breadcrumbs::render('systemconfiguration.systemsettings') }}
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section>
                <div class="row">
                    <div class="col-md-3">
                        <div class="card">
                            <div class="card-body">
                                <h3 style="font-weight:500;font-size: 18px;">Choose Device to Update</h3>
                                <hr>
                                <div class="row ml-2 mt-2">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <input name="choose_all" value="true" id="choose_all" class="custom-control-input" type="checkbox" onclick="chooseAll()">
                                            <label class="custom-control-label" for="choose_all" > All Device
                                            </label>
                                        </div>
                                    </div>
                                    @foreach($alldevice as $alldevices)
                                    @php
                                        $checkConnection = \App\Device\Device::checkConnection($alldevices->device_ip);
                                    @endphp
                                        @if($checkConnection != 0)
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <input name="device_{{$alldevices->id}}" value="true" id="device_{{$alldevices->id}}" class="custom-control-input" type="checkbox">
                                                    <label class="custom-control-label" for="device_{{$alldevices->id}}"> {{$alldevices->device_ip}} ( {{$alldevices->device_name}} - {{$alldevices->location}} {{$alldevices->door}} )
                                                    </label>
                                                </div>
                                            </div>
                                        @endif
                                    @endforeach
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-body">
                                <ul class="nav nav-tabs nav-underline no-hover-bg">
                                    <li class="nav-item">
                                        <a class="nav-link " data-toggle="tab" href="#" data-target="#tab2" role="tab"><i class="la la-check tab-icon text-success"></i> <span>System</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#" data-target="#tab3" role="tab"><i class="la la-check tab-icon text-success"></i> <span>Upload Service</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#" data-target="#tab5" role="tab"><i class="la la-check tab-icon text-success"></i> <span>Sounds</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#" data-target="#tab6" role="tab"><i class="la la-check tab-icon text-success"></i> <span>Temperature</span></a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#" data-target="#tab7" role="tab"><i class="la la-check tab-icon text-success"></i> <span>Access Condition</span></a>
                                    </li>
                                </ul>
                                <div class="tab-content px-1 pt-1">
                                    <div role="tabpanel" class="tab-pane active" id="tab2" aria-labelledby="home-tab3" aria-expanded="false">
                                        @include('device.editMultipleDevice.tab2')
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab3" aria-labelledby="home-tab3" aria-expanded="false">
                                        @include('device.editMultipleDevice.tab3')
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab5" aria-labelledby="home-tab3" aria-expanded="false">
                                        @include('device.editMultipleDevice.tab5')
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab6" aria-labelledby="home-tab3" aria-expanded="false">
                                        @include('device.editMultipleDevice.tab6')
                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="tab7" aria-labelledby="home-tab3" aria-expanded="false">
                                        @include('device.editMultipleDevice.tab7')
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </section>
        </div>
    </div>
</div>
@endsection

@push('js')

<script type="text/javascript">
function chooseAll(){
    var check=$('input:checkbox[name=choose_all]').is(':checked');
    var isCheck = false;
    if(check==true)
        isCheck = true;

    @foreach($alldevice as $alldevices)
        var idExist = document.getElementById("device_"+{{$alldevices->id}});
        if(idExist){
            document.getElementById("device_"+{{$alldevices->id}}).checked = isCheck;
        }
    @endforeach
}

$("form").submit(function(e) {
    e.preventDefault();
    var form = $(this);

    if(!form.valid())
      return '';

    var myArray = [];
    @foreach( $alldevice as $alldevices)

        var idExist = document.getElementById("device_"+{{$alldevices->id}});
        if(idExist){
            var check=$('input:checkbox[name=device_'+{{$alldevices->id}}+']').is(':checked');
            console.log(check);
            if(check==true)
                myArray.push("{{$alldevices->id}}");
        }

    @endforeach
    if ( myArray.length == 0 ) {
        swal('Unsuccess!', 'Please choose device to edit', 'warning');
        return '';
    }

    var fd = new FormData(form[0]);    
    fd.append('ipArray',JSON.stringify(myArray));

    swal({
        title: "Proceed?",
        text: "Are you sure to update system configuration",
        icon: "warning",
        buttons: {
            cancel: "Cancel",
            confirm: {
                text: "Proceed",
                value: "confirm",
                closeModal: false,
                className: "btn-info",
            },
        },
        dangerMode: true,
    })
    .then((confirm) => {

            if(confirm){
                $.ajax({
                    url: form.attr('action'),
                    method: form.attr('method'),
                    data: fd,
                    dataType: 'json',
                    async: true,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                      swal(data.title, data.message, data.status);
                      location.reload();
                    }
                });
            }

    });

});

$('body').on('click','#test_email',function(){

    var form = $("form.form-email");

    if(!form.valid())
      return;

    swal({
        title: "Send Test Email",
        text: "Before proceed please click at Save to save System Configuration",
        icon: "warning",
        buttons: {
            cancel: "Cancel",
            confirm: {
                text: "Proceed",
                value: "confirm",
                closeModal: false,
                className: "btn-info",
            },
        },
        dangerMode: true,
    })
    .then((confirm) => {

        if(confirm){
            $.ajax({
                url: '{{ route('admin.settings.checkemail') }}',
                method: form.attr('method'),
                data: new FormData(form[0]),
                dataType: 'json',
                async: true,
                contentType: false,
                processData: false,
                success: function(data) {
                  swal(data.title, data.message, data.status);
                }
            });
        }

    });

})

</script>
@endpush