@extends('layouts.admin')
@section('content')

<div class="card">
    <div class="card-header">
        {{ trans('global.create') }} Tags
    </div>

    <div class="card-body">
        <form method="POST" action="{{ route("admin.tags.store") }}" enctype="multipart/form-data">
            @csrf
            <div class="form-group">
                <label class="required" for="name">Tags Name</label>
                <input class="form-control {{ $errors->has('name') ? 'is-invalid' : '' }}" type="text" name="name" id="name" value="{{ old('name', '') }}" required>
                @if($errors->has('name'))
                    <div class="invalid-feedback">
                        {{ $errors->first('name') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.permission.fields.title_helper') }}</span>
            </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        Add Devices To Tags
    </div>

    <div class="card-body">
            <label for="province">Filter</label>
            <div class="ml-1 row">
                <div class="form-group mr-2">
                    
                    <select class="form-control select2" name="province" id="province">
                        <option value="" selected disabled>-- Select Province --</option>
                        @foreach ($provinces as $province)
                            <option value="{{$province->id}}">{{$province->name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mr-2">
                    <select class="form-control select2" name="city" id="city">
                        <option value="" selected disabled>-- Select City --</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="permissions">Devices</label>
                <div style="padding-bottom: 4px">
                    <span class="btn btn-info btn-xs select-all" style="border-radius: 0">{{ trans('global.select_all') }}</span>
                    <span class="btn btn-info btn-xs deselect-all" style="border-radius: 0">{{ trans('global.deselect_all') }}</span>
                </div>
                <select class="form-control select2 {{ $errors->has('devices') ? 'is-invalid' : '' }}" name="devices[]" id="devices" multiple>
                </select>
                @if($errors->has('permissions'))
                    <div class="invalid-feedback">
                        {{ $errors->first('permissions') }}
                    </div>
                @endif
                <span class="help-block">{{ trans('cruds.role.fields.permissions_helper') }}</span>
            </div>
            <div class="form-group">
                <button class="btn btn-danger" type="submit">
                    {{ trans('global.save') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection
@section('scripts')
    <script>
        var base_url = '{{ env('APP_URL') }}';
    function clearOptions(id) {
        $('#' + id).empty().trigger('change');
    }
    var selectProv = $('#province');
    $(selectProv).change(function () {

        var value = $(selectProv).val();
        var text = $('#province :selected').text();
        clearOptions('city');
        $.ajax({
            url: base_url+ '/api/v1/cities/' + value,
            type: "GET",
            cache: true,
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin":"*",
                "Authorization":"{{ env('APP_TOKEN') }}"
            },
            success: function (res) {
                data = [{
                    id: "",
                    text: "-- Select City --"
                }];
                res.data.forEach(function (e) {
                    data.push({"id":e.id, "text":e.name});
                });

                //implemen data ke select provinsi
                $("#city").select2({
                    dropdownAutoWidth: true,
                    width: '100%',
                    data: data
                })
            }
        });
    });
    var select_city = $('#city');
    $(select_city).change(function () {
        var value = $(select_city).val();
        $.ajax({
            url: base_url+ '/api/v1/devices?city=' + value,
            type: "GET",
            cache: true,
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Origin":"*",
                "Authorization":"{{ env('APP_TOKEN') }}"
            },
            success: function (res) {
                console.log(res.data);
                data = [];
                res.data.forEach(function (e) {
                    console.log(e.name);
                    data.push({"id":e.id, "text":e.serial_number});
                });

                //implemen data ke select provinsi
                $("#devices").select2({
                    dropdownAutoWidth: true,
                    width: '100%',
                    data: data
                })
            }
        });
    });
    </script>
@endsection