@extends('layouts.admin')
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Add school</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.school.index')}}">School List</a></li>
                    <li class="breadcrumb-item active">Add school</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>


<!-- Content Header (Page header) -->
{{--
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-12">
                <div class="float-sm-right">
                    <a class="btn btn-info" href="{{route('admin.school.index')}}" title="Back to List"> <i class="fa fa-backward"> Back</i></a>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
--}}
<!-- Main content -->
<section class="content">
    <div class="container-fluid">

        <!-- form start -->
        <form role="form" method="post" id="addNewForm" action="{{route('admin.school.store')}}" enctype="multipart/form-data">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">School Details</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->
                        <!-- /.card-body Account Details-->
                        <div class="card-body ">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="exampleInputEmail1">Name<i style="color: red">*</i></label>
                                        <input type="text" id="name" name="name" value="{{old('name')}}" class="form-control {{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="Name">
                                        @if ($errors->has('name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                        @endif
                                    </div> 
                                </div>
                              <!--   <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="exampleInputEmailMessage">Description</label>
                                        <textarea class="form-control {{ $errors->has('description') ? ' is-invalid' : '' }}" name="description" rows="3" placeholder="Enter ..."></textarea>
                                        @if ($errors->has('description'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('description') }}</strong>
                                        </span>
                                        @endif
                                    </div>                                  
                                </div> -->
                            
                                
                            
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="content_title">Status<i style="color: red">*</i></label>
                                        <select name="is_active" class="form-control">
                                            <!-- <option value="" >Select Status</option> -->
                                            <option value="1" >Active</option>
                                            <option value="0" >Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <!-- <div class="upload-file-wrap">
                            <div class="row addPicture"></div>
                            <div class="row displayPic">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="exampleInputFile">Select Picture</label>
                                        <div class="input-group">
                                            {{--<div class="custom-file">--}}
                                            <input type="file" name="picture" class="custom-file-input {{ $errors->has('media') ? ' is-invalid' : '' }}" id="picture" >
                                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                            {{--</div>--}}
                                            @if ($errors->has('media'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('media') }}</strong>
                                            </span>
                                            @endif
                                        </div>
                                        <span id="errPictMsg" style="display:none; color:red;">File is too big. Please select another file.</span>

                                    </div>
                                </div>
                            </div>
                        </div> -->
                        <!-- /.card-body Account Details-->
                        <div class="card-footer">
                            
                            <div class="float-right">
                                @csrf
                                <input type="submit" id="btnAdd" class="btn btn-primary" value="Save" />
                            </div>
                            <div class="float-right mr-3">
                                <a href="{{route('admin.school.index')}}"><input class="btn btn-danger" type="button" id="exit" name="exit" value="Cancel"></a>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                    <!-- general form elements -->
                    {{--
                    <div class="card card-primary">
                        <div class="card-footer">
                            @csrf
                            <!-- <input type="hidden" name="is_active" value="1" /> -->
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                    --}}
                    <!-- /.card -->

                </div>
                <!--/.col (left) -->
            </div>
        </form>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</section>
<!-- /.content -->

@endsection

@section('script')
<!-- <script src="{{ asset('admin/js/imageUploadValidation.js') }}"></script> -->
<script type="text/javascript">
    
    $(document).ready(function() {

        $("#addNewForm").validate({

            rules: {    

                name: {
                    required: true,
                },
                description :{
                    required: true,
                },
                address : {
                    //required: true,
                },
                is_active : {
                    required: true,
                },
                picture: {
                    required :true,
                }
            }

        });
    });


    $(document).on('click', '.fun-remove-images', function() {

        let closestImageDiv = $(this).closest(".img-holder");
        let src = $(this).closest(".img-holder").index();
        let form = $(this).closest("form");
        toastr.clear();

        console.log($('.img-holder').length);
        if ($('.img-holder').length == 1) {
            toastr.warning('You should select atleast one image');
        } else {
            $(this).closest(".img-holder").remove();
            $(this).closest(".hiddenMedia").remove();
        }

        if ($('.img-holder').length < 3) {
            $('.displayPic').show();
        } else {
            $('.displayPic').hide();
        }
        $(".hiddenMedia").each(function(i) {
            $(this).closest('div').find('input:checkbox').attr('name', 'feature_image_new[' + i + ']');
            $(this).closest('div').find('input:checkbox').attr('id', +i);
            $(this).closest('div').find('label').attr('for', +i);
        });
        var checkLength = $('input[type="checkbox"]:checked').length;
        if (checkLength == 0) {
            //alert( $('input[type="checkbox"]:first').attr('name'));
            $('input[type="checkbox"]:first').prop('checked', true);
            $('.img_title:first').show();
        }

        //console.log($('.img-holder').length);
    });


    $(document).on('click', '.fetauresCheck', function() {
        var checkLength = $('input[type="checkbox"]:checked').length;
        $('.img_title').hide();
        if (checkLength == 0) {
            $(this).prop('checked', true);
            $(this).parents('.img__wrap').find('.img_title').show();
        } else {
            $('.fetauresCheck').not(this).prop('checked', false);
            $(this).parents('.img__wrap').find('.img_title').show();
        }
        //$('.fetauresCheck').not(this).prop('checked', false);


    });

</script>

@endsection