@extends('admin/layouts/app')

@section('page-title')
<title>Create Institute | 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">Institute</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('institute.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">
        <!--begin::Contact-->
        <div class="card">
            <!--begin::Body-->
            <div class="card-body p-lg-17">
                <!--begin::Row-->
                <form enctype="multipart/form-data" action="{{route('institute.store')}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form">
                    @csrf
                    <h1 class="fw-bolder text-dark mb-9">Create Institute</h1>
                    <!--begin::Input group-->
                    <div class="row mb-3">
                        <!--begin::Col-->
                        <div class="col-md-6 pe-lg-10">
                            <!--begin::Form-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">Name</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid" placeholder="Enter Name" 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">--}}
{{--                                <!--begin::Label-->--}}
{{--                                <label class="required fs-5 fw-bold mb-2">Slug</label>--}}
{{--                                <!--end::Label-->--}}
{{--                                <!--begin::Input-->--}}
{{--                                <input type="text" class="form-control form-control-solid" placeholder="Enter Slug" name="slug" value="{{old('slug')}}" autocomplete="off" />--}}
{{--                                @if($errors->has('slug'))--}}
{{--                                <span class="text-danger">{{ $errors->first('slug') }}</span>--}}
{{--                                @endif--}}
{{--                                <!--end::Input-->--}}
{{--                            </div>--}}
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">User Name</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid" placeholder="Enter User Name" name="user_name" value="{{old('user_name')}}" autocomplete="off" />
                                @if($errors->has('user_name'))
                                <span class="text-danger">{{ $errors->first('user_name') }}</span>
                                @endif

                                <!--end::Input-->
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">Email</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="email" class="form-control form-control-solid" placeholder="Enter Email" name="email" value="{{old('email')}}" autocomplete="off" />
                                @if($errors->has('email'))
                                <span class="text-danger">{{ $errors->first('email') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold mb-2 required">Phone</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="text" class="form-control form-control-solid" placeholder="Enter Phone" name="phone_number" value="{{old('phone_number')}}" autocomplete="off">
                                @if($errors->has('phone_number'))
                                <span class="text-danger">{{ $errors->first('phone_number') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">Password</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="password" class="form-control form-control-solid" placeholder="Enter Password" name="password" autocomplete="off" minlength="8" maxlength="16"/>
                                @if($errors->has('password'))
                                <span class="text-danger">{{ $errors->first('password') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">Confirm Password</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input type="password" class="form-control form-control-solid" placeholder="Enter Confirm Password" name="password_confirmation" autocomplete="off" minlength="8" maxlength="16"/>
                                @if($errors->has('password_confirmation'))
                                <span class="text-danger">{{ $errors->first('password_confirmation') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Institute Type</label>
                                <select id="institute_type" class="form-select form-select-solid" data-control="select2" data-placeholder="Select a Institute Type" name="institute_type">
                                    <option selected disabled>Select Institute Type</option>
                                    <option @if(old('institute_type') == 1) selected @endif value="1">Education</option>
                                    <option @if(old('institute_type') == 2) selected @endif value="2">Training</option>
                                    <option @if(old('institute_type') == 3) selected @endif value="3">Study Abroad</option>
                                </select>
                                @if($errors->has('institute_type'))
                                <span class="text-danger">{{ $errors->first('institute_type') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Institute Category</label>
                                <select id="company_category_id" name="company_category_id" data-control="select2" data-placeholder="Select a Institute Category ..." class="form-select form-select-solid">
                                    <option selected disabled>Select Institute Category</option>
                                </select>
                                @if($errors->has('company_category_id'))
                                <span class="text-danger">{{ $errors->first('company_category_id') }}</span>
                                @endif
                            </div>
                            {{-- <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Main Category</label>
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select a Main Category" name="category_type_id">
                                    <option selected disabled>Select Main Category</option>
                                    @foreach($category_types as $category_type)
                                    <option @if(old('category_type_id') == $category_type->id) selected @endif value="{{$category_type->id}}"> {{$category_type->name}}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('category_type_id'))
                                <span class="text-danger">{{ $errors->first('category_type_id') }}</span>
                                @endif
                            </div> --}}
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Ownership Type</label>
                                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select a Ownership Type" name="ownership_type_id">
                                    <option selected disabled>Select Ownership Type</option>
                                    @foreach($ownership_types as $ownership_type)
                                    <option @if(old('ownership_type_id') == $ownership_type->id) selected @endif value="{{$ownership_type->id}}"> {{$ownership_type->title}}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('ownership_type_id'))
                                <span class="text-danger">{{ $errors->first('ownership_type_id') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Country</label>
                                <select id="country_id" name="country_id" data-control="select2" data-placeholder="Select a Country ..." class="form-select form-select-solid">
                                    <option selected disabled>Select Country</option>
                                    @foreach($countries as $country)
                                    @if($country->id == 18)
                                    <option @if(old('country_id') == $country->id) selected @endif value="{{$country->id}}" selected>{{$country->nice_name}}</option>
                                    @else
                                    <option @if(old('country_id') == $country->id) selected @endif value="{{$country->id}}">{{$country->nice_name}}</option>
                                    @endif
                                    @endforeach
                                </select>
                                @if($errors->has('country_id'))
                                <span class="text-danger">{{ $errors->first('country_id') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">Division</label>
                                <select id="division_id" name="division_id" data-control="select2" data-placeholder="Select a Division ..." class="form-select form-select-solid">
                                    <option selected disabled>Select Division</option>
                                </select>
                                @if($errors->has('division_id'))
                                <span class="text-danger">{{ $errors->first('division_id') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class="required fs-6 fw-bold mb-2">District</label>
                                <select id="district_id" name="district_id" data-control="select2" data-placeholder="Select a District ..." class="form-select form-select-solid">
                                    <option selected disabled>Select District</option>
                                </select>
                                @if($errors->has('district_id'))
                                <span class="text-danger">{{ $errors->first('district_id') }}</span>
                                @endif
                            </div>
                            <div class="d-flex flex-column mb-5 fv-row">
                                <label class=" fs-6 fw-bold mb-2">Thana</label>
                                <select id="thana_id" name="thana_id" data-control="select2" data-placeholder="Select a Thana ..." class="form-select form-select-solid">
                                    <option selected disabled>Select Thana</option>
                                </select>
                                @if($errors->has('thana_id'))
                                <span class="text-danger">{{ $errors->first('thana_id') }}</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('institute.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>
                            <!--end::Form-->
                        </div>
                        <div class="col-md-6 pe-lg-10">
                            <!--begin::Form-->
                            <div class="d-flex flex-column mb-5 fv-row">
                                <!--begin::Label-->
                                <label class="required fs-5 fw-bold mb-2">Logo</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input accept="image/*" type="file" id="logo" name="logo" class="form-control dropify" placeholder="Enter Logo">
                                <span style="font-size: 12px;color: red;">Suggested image ratio: 108 x 108 | max-size: 100 KB</span>
                                @if($errors->has('logo'))
                                <span class="text-danger">{{ $errors->first('logo') }}</span>
                                @endif

                                <!--end::Input-->
                            </div>
                            <!--end::Form-->
                        </div>
                    </div>

                    <!--end::Submit-->
                </form>

            </div>
            <!--end::Body-->
        </div>
        <!--end::Contact-->
    </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') }}">
@endsection

@section('extra-script')
<script>
    $(document).ready(function() {
        $('.menu-item-institute').addClass('here');
        $('.menu-item-institute').addClass('show');
        $('.menu-sub-item-institute').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>

//validate form
<script>
    $(function() {
        $("form[name='institute']").validate({
            rules: {
                name:'required',
                user_name: 'required',
                email: {
                    required: true,
                    email: true
                },
                // phone_number: 'required',
                password: 'required',
                password_confirmation: 'required',
                // category_type_id: 'required',
                ownership_type_id: 'required',
                country_id: 'required',
                division_id: 'required',
                district_id: 'required',
                // thana_id: 'required',
                logo: 'required',
                institute_type: 'required',
                company_category_id: 'required',
            },
            messages: {
                name: "Name is required.",
                user_name: "User name is required.",
                email: "Email is required.",
                // phone_number: "Phone is required.",
                // password: "Password is required.",
                // password_confirmation: "Confirm password is required.",
                // category_type_id: "Main category is required.",
                ownership_type_id: "Ownership type is required.",
                country_id: "Country is required.",
                division_id: "Division is required.",
                district_id: "District is required.",
                thana_id: "Thana is required.",
                logo: "Logo is required.",
                institute_type: "Institute Type is required.",
                company_category_id: "Institute Category 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();
        }
    });

    $('#institute_type').on('change', function() {
        var institute_type = $(this).val();
        let old_company_category_id = "{{old('company_category_id')}}";
        if (institute_type) {
            $.ajax({
                type: "GET",
                url: "{{url('get-company-category')}}?company_design_category=" + institute_type,
                success: function(res) {
                    if (res) {
                        $("#company_category_id").empty();
                        $("#company_category_id").append('<option selected disabled>Select Institute Category</option>');
                        $.each(res, function(key, value) {
                            if(old_company_category_id == key) {
                                $("#company_category_id").append('<option selected value="' + key + '">' + value + '</option>');
                            }else {
                                $("#company_category_id").append('<option value="' + key + '">' + value + '</option>');
                            }
                        });
                    } else {
                        $("#company_category_id").empty();
                    }
                }
            });
        } else {
            $("#company_category_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>
@endsection