@extends('admin/layouts/app')

@section('page-title')
<title>Create Approval Organization | Simple Admission</title>
@endsection

@section('page-breadcrumb')
<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
    <!--begin::Title-->
    <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">Approval Organization</h1>
    <!--end::Title-->
    <!--begin::Separator-->
    <span class="h-20px border-gray-300 border-start mx-4"></span>
    <!--end::Separator-->
    <!--begin::Breadcrumb-->
    <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
        <!--begin::Item-->
        <li class="breadcrumb-item text-muted">
            <a href="{{route('approval-organizations.create')}}" class="text-muted text-hover-primary">Create</a>
        </li>
    </ul>
    <!--end::Breadcrumb-->
</div>
@endsection

@section('main-content')
<!--begin::Post-->
<div class="post d-flex flex-column-fluid" id="kt_post">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
        <div class="card">
            <div class="card-body p-lg-17">
                <!--begin::Form-->
                <form enctype="multipart/form-data" action="{{route('approval-organizations.store')}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form">
                    @csrf
                    <h1 class="fw-bolder text-dark mb-9">Create Approval Organization</h1>
                    <!--begin::Input group-->
                    <div class="row mb-3">
                        <!--begin::Col-->
                        <div class="col-md-6 pe-lg-10">
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">Name (EN)</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid" placeholder="Enter Organization Name (EN)" name="name" value="{{old('name')}}" autocomplete="off" />
                                @if($errors->has('name'))
                                <span class="text-danger">{{ $errors->first('name') }}</span>
                                @endif
                                <!--end::Input-->
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="fs-5 fw-bold mb-2">Name (BN)</label>
                                <input type="text" class="form-control form-control-solid" placeholder="Enter Organization Name (BN)" name="name_bn" value="{{old('name_bn')}}" autocomplete="off" />
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-5 fw-bold mb-2">Short Description (EN)</label>
                                <textarea type="text" class="summernote form-control form-control-solid" placeholder="Enter Description (EN)" name="short_description" autocomplete="off" >{{old('short_description')}}</textarea>
                                @if($errors->has('short_description'))
                                <span class="text-danger">{{ $errors->first('short_description') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="fs-5 fw-bold mb-2">Short Description (BN)</label>
                                <textarea type="text" class="summernote form-control form-control-solid" placeholder="Enter Description (BN)" name="short_description_bn" autocomplete="off" >{{old('short_description_bn')}}</textarea>
                                @if($errors->has('short_description_bn'))
                                <span class="text-danger">{{ $errors->first('short_description_bn') }}</span>
                                @endif
                            </div>
                            <div class="d-flex mb-5 fv-row">
                                <label class="form-check form-switch form-check-custom form-check-solid">
                                    <span class="required form-check-label fw-bold text-muted" style="margin-right: 10px;margin-left: 0px;">Status</span>
                                    <input class="form-check-input radio-btn" name="status" type="checkbox" value="1" checked="checked" />
                                </label>
                                <!--end::Switch-->
                            </div>
                            <div class="d-flex">
                                <a style="margin-right:5px;" href="{{route('approval-organizations.index')}}" class="btn btn-secondary">Back</a>
                                <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                                    <!--begin::Indicator-->
                                    <span class="indicator-label">Create</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <!--end::Form-->
            </div>
        </div>
    </div>
    <!--end::Container-->
</div>
<!--end::Post-->
@endsection

@section('extra-css')
<link href="{{ asset('css/toastr.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{ asset('css/dropify.min.css') }}">
<link rel="stylesheet" href="{{ asset('summernote/summernote.css') }}">
@endsection

@section('extra-script')
<script>
    $(document).ready(function(){
        $('.menu-item-setting-management').addClass('here');
        $('.menu-item-setting-management').addClass('show');
        $('.menu-sub-item-institute-approval-organization').addClass('active');
    });
</script>
<script src="{{ asset('js/toastr.min.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/dropify.min.js') }}"></script>
<script src="{{ asset('summernote/summernote.min.js') }}"></script>
<script src="{{ asset('js/popper.min.js') }}"></script>

//validate form
<script>
    $(function() {
        $("form[name='institute']").validate({
            rules: {
                name:'required',
                short_description: 'required',
            },
            messages: {
                name: "Name is required.",
                short_description: "Short note is required.",
            },
            submitHandler: function(form) {
            form.submit();
            }
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function() {
        var drEvent = $('#logo').dropify();
        drEvent = drEvent.data('dropify');
        drEvent.resetPreview();
        drEvent.clearElement();
    });
</script>
<script type="text/javascript">
    @if(Session::has('message'))
    var type = "{{Session::get('alert-type', 'info')}}"
    switch (type) {
        case 'info':
            toastr.info("{{Session::get('message')}}");
            break;
        case 'success':
            toastr.success("{{Session::get('message')}}");
            break;
        case 'warning':
            toastr.warning("{{Session::get('message')}}");
            break;
        case 'error':
            toastr.error("{{Session::get('message')}}");
            break;
    }
    @endif

    @if(count($errors) > 0)
    @foreach($errors->all() as $error)
    toastr.error("{{ $error }}");
    @endforeach
    @endif
</script>
<script>
    $('#country_id').change(function() {
        var country_id = $(this).val();
        let oldDiv = "{{old('division_id')}}";
        if (country_id) {
            $.ajax({
                type: "GET",
                url: "{{url('get-division-list')}}?country_id=" + country_id,
                success: function(res) {
                    if (res) {
                        $("#division_id").empty();
                        $("#division_id").append('<option selected disabled>Select Division</option>');
                        $.each(res, function(key, value) {
                            if(oldDiv == key) {
                                $("#division_id").append('<option selected value="' + key + '">' + value + '</option>');
                            }else {
                                $("#division_id").append('<option value="' + key + '">' + value + '</option>');
                            }
                        });
                        if(oldDiv) {
                            $("#division_id").trigger("change");
                        }
                    } else {
                        $("#division_id").empty();
                    }
                }
            });
        } else {
            $("#division_id").empty();
            $("#district_id").empty();
            $("#thana_id").empty();
        }
    });
    $('#division_id').on('change', function() {
        var division_id = $(this).val();
        let oldDis = "{{old('district_id')}}";
        if (division_id) {
            $.ajax({
                type: "GET",
                url: "{{url('get-district-list')}}?division_id=" + division_id,
                success: function(res) {
                    if (res) {
                        $("#district_id").empty();
                        $("#district_id").append('<option selected disabled>Select District</option>');
                        $.each(res, function(key, value) {
                            if(oldDis == key) {
                                $("#district_id").append('<option selected value="' + key + '">' + value + '</option>');
                            }else {
                                $("#district_id").append('<option value="' + key + '">' + value + '</option>');
                            }
                        });
                        if(oldDis) {
                            $("#district_id").trigger("change");
                        }
                    } else {
                        $("#district_id").empty();
                    }
                }
            });
        } else {
            $("#district_id").empty();
            $("#thana_id").empty();
        }
    });
    $('#district_id').on('change', function() {
        var district_id = $(this).val();
        let oldThana = "{{old('thana_id')}}";
        if (district_id) {
            $.ajax({
                type: "GET",
                url: "{{url('get-thana-list')}}?district_id=" + district_id,
                success: function(res) {
                    if (res) {
                        $("#thana_id").empty();
                        $("#thana_id").append('<option selected disabled>Select Thana</option>');
                        $.each(res, function(key, value) {
                            if(oldThana == key) {
                                $("#thana_id").append('<option selected value="' + key + '">' + value + '</option>');
                            }else {
                                $("#thana_id").append('<option value="' + key + '">' + value + '</option>');
                            }
                        });
                    } else {
                        $("#thana_id").empty();
                    }
                }
            });
        } else {
            $("#thana_id").empty();
        }
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        let oldDiv = "{{old('division_id')}}";
        $.ajax({
            type: "GET",
            url: "{{url('get-division-list')}}?country_id=18",
            success: function(res) {
                if (res) {
                    // console.log('res', res);
                    $("#division_id").empty();
                    $("#division_id").append('<option selected disabled>Select Division</option>');
                    $.each(res, function(key, value) {
                        if(oldDiv == key) {
                            $("#division_id").append('<option selected value="' + key + '">' + value + '</option>');
                        }else {
                            $("#division_id").append('<option value="' + key + '">' + value + '</option>');
                        }
                    });
                    if(oldDiv) {
                        $("#division_id").trigger("change");
                    }
                } else {
                    $("#division_id").empty();
                }
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.summernote').summernote({
            height: 200,
            popover: {
                image: [],
                link: [],
                air: []
            }
        });
    });
</script>
@endsection