@extends('layouts.adminLayouts')

@section('head')
    <!-- Select2 -->
    <link rel="stylesheet" href="{{url('/assets/admin/bower_components/select2/dist/css/select2.min.css')}}">
    <link href="{{url('/assets/taginput/tagsinput.css') }}" rel="stylesheet" type="text/css">
    <style>
        .file-upload {
            background-color: #ffffff;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
        }

        .file-upload-content {
            display: none;
            text-align: center;
        }

        .file-upload-input {
            position: absolute;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            outline: none;
            opacity: 0;
            cursor: pointer;
        }

        .image-upload-wrap {
            margin-top: 20px;
            border: 4px dashed #1FB264;
            position: relative;
        }

        .image-dropping,
        .image-upload-wrap:hover {
            background-color: #1FB264;
            border: 4px dashed #ffffff;
        }

        .image-title-wrap {
            padding: 0 15px 15px 15px;
            color: #222;
        }

        .drag-text {
            text-align: center;
        }

        .drag-text h3 {
            font-weight: 100;
            text-transform: uppercase;
            color: #15824B;
            padding: 60px 0;
        }

        .file-upload-image {
            max-height: 200px;
            max-width: 200px;
            margin: auto;
            padding: 20px;
        }

        .remove-image {
            width: 200px;
            margin: 0;
            color: #fff;
            background: #cd4535;
            border: none;
            padding: 10px;
            border-radius: 4px;
            border-bottom: 4px solid #b02818;
            transition: all .2s ease;
            outline: none;
            text-transform: uppercase;
            font-weight: 700;
        }

        .remove-image:hover {
            background: #c13b2a;
            color: #ffffff;
            transition: all .2s ease;
            cursor: pointer;
        }

        .remove-image:active {
            border: 0;
            transition: all .2s ease;
        }
    </style>
@stop

@section('content-header')
    <section class="content-header">
        <h1>
            ایجاد منطقه جدید
        </h1>
        {{ Breadcrumbs::render('parish.create') }}

    </section>
@stop


@section('content')


    <div class="margin" dir="ltr">

        <div class="btn-group">
            <a onclick="window.history.go(-1); return false;" type="button" class="btn btn-primary"><i class="fa fa-backward"></i> بازگشت</a>
        </div>

    </div>


    <div class="box">
        <div class="box-header">
            <h3 class="box-title">ایجاد منطقه جدید</h3>
        </div>
        <!-- /.box-header -->
        <div class="box-body">

            <div class="alert alert-danger" style="display:none" id="alert_show"></div>
            <div class="alert alert-success" style="display:none" id="alert_show_success"></div>
            <form id="parishForm" onsubmit="save_parish();return false;">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-md-4"> انتخاب استان <span style="color: red">*</span> </label>
                            <div class="col-md-8">
                                <select name="state_id"  class="form-control select2" style="width: 100%;">
                                    <option value="">انتخاب کنید</option>
                                    @foreach($states as $state)
                                        <option value="{{$state->id}}">{{$state->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-md-4"> انتخاب شهر <span style="color: red">*</span> </label>
                            <div class="col-md-8">
                                <select name="city_id"  class="form-control select2" style="width: 100%;">
                                </select>
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-md-4"> نام منطقه <span style="color: red">*</span> </label>
                            <div class="col-md-8">
                                <input type="text" name="name" class="form-control"
                                       placeholder="نام منطقه درج شود...">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="overlay" style="display:none" id="loading">
            <i class="fa fa-refresh fa-spin"></i>
        </div>
        <div class="box-footer text-left">
            <a onclick="save_parish();" class="btn btn-primary">ارسال</a>
        </div>
        <!-- /.box-body -->
    </div>
@stop


@section('footer')

    <script>
        save_parish = function () {
            $("#loading").show();
            var data = $("#parishForm").serializeArray();
            $.ajax({
                url: '{{ url('/admin/parish') }}',
                type: 'POST',
                data: data,
                success: function (data) {
                    if (!data.errors) {
                        $("#alert_info").hide();
                        $("#loading").hide();
                        $("#alert_show").hide();
                        $("#alert_show_success").html('');

                        jQuery.each(data.messages, function (key, value) {
                            jQuery('.alert-success').show();
                            jQuery('.alert-success').append('<p>' + value + '</p>');
                        });
                        setTimeout(function () {
                            window.location.replace('{{url('/admin/parish')}}');
                        }, 2000);
                    } else {
                        $("#alert_info").hide();
                        $("#alert_show").html('');
                        $("#alert_show_success").html('');
                        $("#alert_show_success").hide();
                        jQuery.each(data.errors, function (key, value) {
                            jQuery('.alert-danger').show();
                            jQuery('.alert-danger').append('<p>' + value + '</p>');
                        });
                        $("#loading").hide();
                    }
                },
            });
        };
    </script>

    <!--   dynamic Select State and City -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('select[name="state_id"]').on('change', function() {
                var stateID = $(this).val();
                if(stateID) {
                    $.ajax({
                        url: '{{url('/admin/parishAjax')}}/'+stateID,
                        type: "GET",
                        dataType: "json",
                        success:function(data) {
                            $('select[name="city_id"]').empty();
                            $.each(data, function(key, value) {
                                $('select[name="city_id"]').append('<option value="'+ key +'">'+ value +'</option>');
                            });
                        }
                    });
                }else{
                    $('select[name="city_id"]').empty();
                }
            });
        });
    </script>

    <!-- Select2 -->
    <script src="{{url('/assets/admin/bower_components/select2/dist/js/select2.full.min.js')}}"></script>
    <script>

        $(function () {
            //Initialize Select2 Elements
            $('.select2').select2();
        })
    </script>

@stop