@extends('layouts.admin')
@section('content')
    <script type="text/javascript" src="{{ URL::asset('js/select2.min.js') }}"></script>
    <link href="{{ URL::asset('css/select2.css') }}" media="all" rel="stylesheet" type="text/css"/>

    <div class="pageheader">
        <div class="media">
            <div class="media-body">
                <h4>@lang('messages.Create New Township')</h4>
                <ul class="breadcrumb">
                    <li><a href="{{ URL::to('admin/dashboard') }}"><i class="fa fa-home"></i> @lang('messages.Home')</a></li>
                    <li><a href="{{ URL::to('admin/township') }}">@lang('messages.Manage Township')</a></li>
                    <li>@lang('messages.Create Township')</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="row">
            <div class="">
                <div class="portlet box green">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="fa fa-plus"></i>@lang('messages.Create Township')
                        </div>
                    </div>
                    <div class="portlet-body form">

                        {!!Form::open(array('class'=>'form-horizontal','id'=>'township_form','files' => true));!!}
                        <div class="form-body">
                            <div class='form-group'>
                                <div class='control-label col-md-3'>
                                    {{ Form::label('country_id', trans('messages.Country Name')) }}<span
                                            class='required asterisk' aria-required='true'>*</span>
                                </div>
                                <div class='col-md-4'>
                                    <select id='country_id' class='select2' name='country_id'>
                                        @if (!empty($countryList))
                                            <option value=''>@lang('messages.Select Country')</option>
                                            @foreach($countryList as $country)
                                                <option value='{{$country->id}}'>{{$country->name_en}}</option>
                                            @endforeach
                                        @else
                                            <option value=''>@lang('messages.No Country Found')</option>
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class='form-group'>
                                <div class='control-label col-md-3'>
                                    {{ Form::label('city_id', trans('messages.City Name')) }}<span
                                            class='required asterisk' aria-required='true'>*</span>
                                </div>
                                <div class='col-md-4'>
                                    <select id='city_id' class='select2' name='city_id'>
                                            <option value=''>@lang('messages.Select Country First')</option>
                                    </select>
                                </div>
                            </div>
                            <div class='form-group'>
                                <div class='control-label col-md-3'>
                                    {{ Form::label('warehouse_id', trans('messages.Store Name')) }}<span
                                            class='required asterisk' aria-required='true'>*</span>
                                </div>
                                <div class='col-md-4'>
                                    <select id='warehouse_id' class='select2' name='warehouse_id'>
                                            <option value=''>@lang('messages.Select City First')</option>
                                    </select>
                                </div>
                            </div>
                        <div class="form-body">
                            <div class='form-group'>
                                <div class='control-label col-md-3'>
                                    {{ Form::label('township_name', trans('messages.Township Name')) }}<span
                                            class='required asterisk' aria-required='true'>*</span>
                                </div>
                                <div class='col-md-4'>
                                    {!! Form::text('township_name', '', ['id' => 'township_name', 'class' => 'form-control', 'placeholder' => trans('messages.township Name')]) !!}
                                </div>
                            </div>

                            <div class="form-group radio_checkbox">
                                <label class="control-label col-md-3">
                                    @lang('messages.Status')<span class="required asterisk"
                                                                  aria-required="true">*</span>
                                </label>
                                <div class="col-md-4">
                                    <input type="checkbox" class="" name="status" id="status" value="1">
                                    <label for="status" class="toogle">@lang('messages.Active')</label>
                                </div>
                            </div>

                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-offset-3 col-md-9">
                                        <button type="button" id="btnCancel" class="btn btn-danger" onclick="window.location='{{ url('/admin/township') }}'">@lang('messages.Cancel')</button>
                                        <button type="submit" id="btnSubmit" value="submit" data-loading-text="<i class='fa fa-spinner fa-spin '></i> @lang('messages.Processing...')" class="btn btn-primary">@lang('messages.Save')</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        {!! Form::close(); !!}
                    </div>

                </div>
            </div>

        </div>
    </div>
    <script>
        $(document).ready(function () {
            $('#country_id').select2();
            $('#city_id').select2();
            $('#warehouse_id').select2();
            $('#township_form').submit(function (e) {
                e.preventDefault();
                $('#loader-wrapper').removeClass('loader');
                $("#btnSubmit").attr("disabled", true);
                $('#btnCancel').attr("disabled", true);
                $('#btnSubmit').button('loading');
                var token, url, data;
                token = $('meta[name="csrf-token"]').attr('content');
                url = '{{url('admin/township/store')}}';
                data = new FormData(this);
                $.ajax({
                    url: url,
                    headers: {'X-CSRF-TOKEN': token},
                    data: data,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    datatype: 'json',
                    success: function (resp) {
                        $('#loader-wrapper').addClass('loader');
                        $("#btnSubmit").attr("disabled", false);
                        $('#btnCancel').attr("disabled", false);
                        $('#btnSubmit').button('reset');
                        if (resp.http_code == 400) {
                            err_msg = resp.message.replace(/, \\n /g, '<br>');
                            toastr.error(err_msg);
                        } else if (resp.http_code == 200) {
                            toastr.success(resp.message);
                            var loc = '{{ url('admin/township')}}';
                            $(location).attr('href', loc);
                        } else if (resp.http_code == 401) {
                            toastr.warning(resp.message);
                            var login = '{{ url('admin/login')}}';
                            $(location).attr('href', login);
                        } else if (resp.http_code == 500) {
                            toastr.warning(resp.message);
                        }
                    },
                    error: function (err) {
                        $("#btnSubmit").attr("disabled", false);
                        $('#btnCancel').attr("disabled", false);
                        $('#btnSubmit').button('reset');
                    }
                });
            });
        });

        $('#country_id').change(function (e) {
            e.preventDefault();
            var token, url, data;
            country_id = $(this).val();
            token = $('meta[name="csrf-token"]').attr('content');
            url = '{{url('admin/cities/filter-city')}}';
            data = {country_id: country_id};
            if (country_id == '') {
                $('#city_id').empty();
                $('#city_id').append($("<option></option>").attr("value", "").text('Select Country First'));
                $('#city_id').val('').trigger("change");
                return false;
            }
            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: data,
                type: 'POST',
                datatype: 'json',
                success: function (resp) {
                    console.log(resp.data);
                    $('#city_id').empty();
                    if (resp.http_code != 200) {
                        $('#city_id').append($("<option></option>").attr("value", "").text('No Cities Found'));
                        $('#city_id').val('').trigger("change");
                    } else {
                        $('#city_id').append($("<option></option>").attr("value", "").text('Select City'));
                        $('#city_id').val('').trigger("change");
                        $.each(resp.data, function (key, value) {
                            $('#city_id').append($("<option></option>").attr("value", value['id']).text(value['name_en']));
                        });
                    }
                }
            });
        });

        $('#city_id').change(function (e) {
            e.preventDefault();
            var token, url, data;
            city_id = $(this).val();
            token = $('meta[name="csrf-token"]').attr('content');
            url = '{{url('admin/warehouse/filter-warehouse')}}';
            data = {city_id: city_id};
            if (city_id == '') {
                $('#warehouse_id').empty();
                $('#warehouse_id').append($("<option></option>").attr("value", "").text('Select City First'));
                $('#warehouse_id').val('').trigger("change");
                return false;
            }
            $.ajax({
                url: url,
                headers: {'X-CSRF-TOKEN': token},
                data: data,
                type: 'POST',
                datatype: 'json',
                success: function (resp) {
                    $('#warehouse_id').empty();
                    if (resp.http_code != 200) {
                        $('#warehouse_id').append($("<option></option>").attr("value", "").text('No Store Found'));
                        $('#warehouse_id').val('').trigger("change");
                    } else {
                        $('#warehouse_id').append($("<option></option>").attr("value", "").text('Select Store'));
                        $('#warehouse_id').val('').trigger("change");
                        $.each(resp.data, function (key, value) {
                            $('#warehouse_id').append($("<option></option>").attr("value", value['id']).text(value['name_en']));
                        });
                    }
                }
            });
        });
        Array.prototype.forEach.call(document.querySelectorAll('.bootstrap-timepicker>[data-clear-input]'), function (el) {
            el.addEventListener('click', function (e) {
                e.target.previousElementSibling.value = '';
            });
        });
    </script>
@endsection