@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    Zones
                </h3>
                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="{{ asset('/admin/dashboard') }}" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="{{ asset('admin/zones') }}" class="m-nav__link">
                            <span class="m-nav__link-text">
                                 Zones
                            </span>
                        </a>
                    </li>
                    <li class="m-nav__separator">
                        -
                    </li>
                    <li class="m-nav__item">
                        <a href="" class="m-nav__link">
                            <span class="m-nav__link-text">
                                @if(isset($zone->id)) Edit @else Add @endif Zone
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- END: Subheader -->
    <div class="m-content">
        @if($errors->any())
            @foreach($errors->all() as $key => $error)
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                    {{$error}}
                </div>
            @endforeach
        @endif
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" id="err" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="flaticon-add"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            @if(isset($zone->id)) Edit Zone @else Add Zone @endif
                        </h3>
                    </div>
                </div>

            </div>
            <!--begin::Form-->
            {{--<form action="@if(isset($zone->id)) {!! asset('admin/zones/edit/'.$zone->id) !!} @else {!! asset('admin/zones/add') !!} @endif" class="m-form m-form--fit m-form--label-align-right" method="POST" enctype="multipart/form-data">--}}
                <div class="m-portlet__body">
                    <div class="m-form__section m-form__section--first">
                        {{--<input type="hidden" name="_token" value="{{csrf_token()}}" />--}}
                        <div class="form-group m-form__group row">
                            <input type="hidden" id="hdnid" value="{{request()->route('id')}}">
                            <label class="col-lg-3 col-form-label">
                                Zone:
                            </label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" name="name" id="zonename" value="{!! $zone->name or Request::old('name','') !!}" placeholder="Enter Zone Name" >
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <input type="hidden" id="hdnid" value="{{request()->route('id')}}">
                            <label class="col-lg-3 col-form-label">
                                State:
                            </label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" name="state" id="state" value="{!! Request::old('state','') !!}" placeholder="Enter State" >
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <input type="hidden" id="hdnid" value="{{request()->route('id')}}">
                            <label class="col-lg-3 col-form-label">
                                City:
                            </label>
                            <div class="col-lg-6">
                                <input type="text" class="form-control m-input" name="city" id="city" value="{!! $city or Request::old('city','') !!}" placeholder="Enter City" >
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Status:
                            </label>
                            <div class="col-lg-2">
                                <select class="js-example-basic form-control" name="status" id="status">
                                    <option value="1">Active</option>
                                    <option value="0"<?php echo isset($zone->status) && $zone->status =='0' ? 'selected' : '' ?> >Inactive</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group m-form__group row">
                            <label class="col-lg-3 col-form-label">
                                Pincodes:
                            </label>
                            <div class="col-lg-8">
                                <input id="chkall" type="checkbox" name="checkall"/>Select All
                                <select class="js-example-basic-multiple form-control" name="pincodes" id="pincodes" multiple="multiple">
                                    @if(isset($zone))
                                        <?php $pinarray = $zone['pincodes']; $explode = explode(',',$pinarray);?>
                                        @foreach($explode as $pincode)
                                            <option value="{!! $pincode !!}" selected>{!! $pincode !!}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>

                    </div>
                </div>
        </div>
        <div class="m-portlet__foot m-portlet__foot--fit">
            <div class="m-form__actions m-form__actions">

                @if(isset($zone))
                    <button onclick="editZone();" class="btn btn-primary">Edit</button>
                @else
                    <button onclick="addZone();" class="btn btn-primary">Submit</button>
                @endif

                <button type="reset" onclick="window.history.back()" class="btn btn-secondary">
                    Cancel
                </button>
            </div>
        </div>
        {{--</form>--}}
        <!--end::Form-->
    </div>
</div>

@include("admin.layouts.footer")
<script>

    let _pincode = null;

    function initSelect2() {
        $('#pincodes').select2({
            closeOnSelect:false,
            multiple:true,
            theme: "classic",
            minimumInputLength: 2,
            ajax: {
                url: '/admin/pincodes/find',
                dataType: 'json',
                data: function (params) {
                    return {
                        state: $('#state').val(),
                        city: $('#city').val(),
                        q: $.trim(params.term)
                    };
                },
                processResults: function (data) {
                    _pincode = data;
                    return {
                        results: data
                    };
                },
                cache: true
            }
        });

    }

    $(document).ready(function() {
        initSelect2();
        $("input#chkall").change(function () {
            let lists = '';
            let listsOptions = '';
            var selected_pin = [];
            if ($(this).is(":checked")) {
                $('#pincodes option:selected').each(function(){
                    selected_pin.push($(this).val());
                });
                $.each(_pincode, function (index, item) {
                    if(!selected_pin.includes(item.text)) {
                        lists += '<li class="select2-selection__choice" title="' + item.text + '" data-select2-id="' + item.id + '"><span class="select2-selection__choice__remove" role="presentation">×</span>' + item.text + '</li>';
                        listsOptions += '<option value="' + item.id + '" selected="selected">' + item.text + '</option>';
                    }
                });

                $(".select2-selection__rendered").append(lists);
                $('#pincodes').append(listsOptions);
            } else {
                $('#pincodes option').each(function() {
                    $(this).prop('selected', false);
                });
                $(".select2-selection__rendered").html('');
                _pincode = null;
                $('#pincodes').find('option').remove();
                initSelect2();
            }
        });
    });

    function addZone(){

        var zonename = $('#zonename').val();
        var pincodes = $('#pincodes').val();
        var status = $('#status').val();

        if(zonename.length === 0 || pincodes == '' || pincodes.length === 0){
            alert('Please fill all fields !')
        }
        else{

            console.log($('#pincodes').val());
            $.ajax({
                type: 'POST',
                url: "add",
                data: {
                    zonename : zonename,
                    pincodes : pincodes,
                    status : status,
                    _token: '{{csrf_token()}}'
                },
                // dataType: "JSON",
                success: function (response) {
                    console.log(response);
                    if(response == 'Exists'){
                        alert('One or more of the selected Pincodes are already mapped to other zone(s) !');
                    }
                    else if(response == 'Success'){
                        alert('Zone added succesfully !');
                        window.location.replace("/admin/zones");
                    }
                    else{
                        alert('Something went wrong :( !');
                    }

                    /*$(".init-loader").css({display:'none'});
                    if (response.status === 'OK') {
                        alert(response.message);
                        window.location.reload();
                    } else {
                        alert(response.message);
                    }*/
                }
            });
        }


    }

    function editZone(){

        var zonename = $('#zonename').val();
        var pincodes = $('#pincodes').val();
        var id = $('#hdnid').val();
        var status = $('#status').val();

        if(zonename == '' || pincodes == ''){
            alert('Please fill all fields !')
        }
        else{

            console.log($('#pincodes').val());
            $.ajax({
                type: 'POST',
                url: "edit",
                data: {
                    zonename : zonename,
                    pincodes : pincodes,
                    status : status,
                    id : id,
                    _token: '{{csrf_token()}}'
                },
                // dataType: "JSON",
                success: function (response) {
                    console.log(response);
                    if(response == 'Exists'){
                        alert('One or more of the selected Pincodes are already mapped to other zone(s) !');
                    }
                    else if(response == 'Success'){
                        alert('Zone edited succesfully !');
                        window.location.replace("/admin/zones");
                    }
                    else{
                        alert('Something went wrong :( !');
                    }
                }
            });
        }


    }
</script>