@extends('admin/institute-management/institute-profile/index')

@section('main-content-tab')
<form action="{{route('institute.profile.campus.update', ['slug'=>$slug,'id'=>$campus->id])}}" name="institute" class="form mb-15" method="POST" id="kt_contact_form" enctype="multipart/form-data">
    @csrf
    <h1 class="fw-bolder text-dark mb-9">Update Campus</h1>
    <input type="hidden" name="thumbnail_data" value="{{$campus->thumbnail}}">
    <!--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">Campus Name</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Campus Name" value="{{$campus->name}}" name="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=" fs-5 fw-bold mb-2">Email</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Email" value="{{$campus->email}}" name="email" autocomplete="off"/>
                @if($errors->has('email'))
                    <span class="text-danger">{{ $errors->first('email') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Alternative Email</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Alternative Email" value="{{$campus->alternative_email}}" name="alternative_email" autocomplete="off"/>
                @if($errors->has('alternative_email'))
                    <span class="text-danger">{{ $errors->first('alternative_email') }}</span>
                @endif

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

            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class=" fs-5 fw-bold mb-2">Phone</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Phone" value="{{$campus->phone_number}}" name="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="fs-5 fw-bold mb-2">Alternative Phone Number</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="text" class="form-control form-control-solid" placeholder="Enter Alternative Phone Number" value="{{$campus->alternative_phone_number}}" name="alternative_phone_number" autocomplete="off"/>
                @if($errors->has('alternative_phone_number'))
                    <span class="text-danger">{{ $errors->first('alternative_phone_number') }}</span>
                @endif

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

            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Latitude</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="number" step="any" id="latitude" class="form-control form-control-solid" placeholder="Enter Latitude" value="{{$campus->latitude}}" name="latitude" autocomplete="off"/>
                @if($errors->has('latitude'))
                    <span class="text-danger">{{ $errors->first('latitude') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Longitude</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input type="number" step="any" id="longitude" class="form-control form-control-solid" placeholder="Enter Longitude" value="{{$campus->longitude}}" name="longitude" autocomplete="off"/>
                @if($errors->has('longitude'))
                    <span class="text-danger">{{ $errors->first('longitude') }}</span>
                @endif

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

            <div class="d-flex flex-column mb-5 fv-row">
                <label class=" 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)
                            <option {{$country->id == $campus->country_id ? 'selected' : ''}} value="{{$country->id}}"> {{$country->nice_name}}</option>
                        @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=" 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=" 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 flex-column mb-5 fv-row">
                <label class=" fs-6 fw-bold mb-2">Full Address</label>
                <textarea id="full_address" class="form-control form-control-solid" placeholder="Enter Full Address" name="full_address" autocomplete="off">{{$campus->full_address}}</textarea>
                @if($errors->has('full_address'))
                    <span class="text-danger">{{ $errors->first('full_address') }}</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" {{$campus->status == 0 ? '' : 'checked'}} />
                </label>
                <!--end::Switch-->
            </div>
            <div class="d-flex">
                <a style="margin-right:5px;" href="{{route('institute.profile.campus', $slug)}}" class="btn btn-secondary">Back</a>
                <button type="submit" class="btn btn-primary" id="kt_contact_submit_button">
                    <!--begin::Indicator-->
                    <span class="indicator-label">Update</span>
                </button>
            </div>
            <!--end::Form-->
        </div>

        <div class="col-md-6 pe-lg-10">
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class=" fs-5 fw-bold mb-2">Campus Thumbnail</label>
                <!--end::Label-->
                <!--begin::Input-->
                <input accept="image/*" id="avatar" type="file" name="thumbnail" class="form-control dropify" placeholder="Enter Thumbnail">
                <span style="font-size: 12px;color: red;">Suggested Image ratio: 400 x 400 | max-size: 500 KB</span>
                @if($errors->has('thumbnail'))
                    <span class="text-danger">{{ $errors->first('thumbnail') }}</span>
                @endif

                <!--end::Input-->
            </div>
            <div class="d-flex flex-column mb-5 fv-row">
                <!--begin::Label-->
                <label class="fs-5 fw-bold mb-2">Campus Map</label>
                <div id="map" style="width:100%;height:300px"></div>

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

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

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

@section('extra-extra-script')
    <script src="{{ asset('js/jquery.validate.js') }}"></script>
    <script src="{{ asset('js/dropify.min.js') }}"></script>
    <script  type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">    </script>

    //validate form
    <script>
        $(function() {
            $("form[name='institute']").validate({
                rules: {
                    name:'required',
                    // email: {
                    //     required: true,
                    //     email: true
                    // },
                    // phone_number: 'required',
                    // latitude: 'required',
                    // longitude: 'required',
                    // country_id: 'required',
                    // division_id: 'required',
                    // district_id: 'required',
                    // thana_id: 'required',
                    // full_address: 'required',
                },
                messages: {
                    name: "Name is required.",
                    email: "Email is required.",
                    phone_number: "Phone is required.",
                    latitude: "Latitude is required.",
                    longitude: "Longitude is required.",
                    country_id: "Country is required.",
                    division_id: "Division is required.",
                    district_id: "District is required.",
                    thana_id: "Thana is required.",
                    full_address: "Full address is required.",
                },
                submitHandler: function(form) {
                form.submit();
                }
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function(){
            var editData = {!! json_encode($campus) !!};
            if(editData && editData.thumbnail)
            {
                var imageUrl = "{{URL::asset($campus->thumbnail)}}";
                var drEvent = $('#avatar').dropify(
                {
                    defaultFile: imageUrl
                });
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
                drEvent.settings.defaultFile = imageUrl;
                drEvent.destroy();
                drEvent.init();
            }
            else{
                var drEvent = $('#avatar').dropify();
                drEvent = drEvent.data('dropify');
                drEvent.resetPreview();
                drEvent.clearElement();
            }

            if(editData.country_id)
            {
                $.ajax({
                    type:"GET",
                    url:"{{url('get-division-list')}}?country_id="+editData.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(editData.division_id == Number(key))
                                {
                                    $("#division_id").append('<option selected value="'+key+'">'+value+'</option>');
                                }
                                else{
                                    $("#division_id").append('<option value="'+key+'">'+value+'</option>');
                                }

                            });
                        }else{
                        $("#division_id").empty();
                        }
                    }
                });
            }

            if(editData.division_id)
            {
                $.ajax({
                    type:"GET",
                    url:"{{url('get-district-list')}}?division_id="+editData.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(editData.district_id == Number(key))
                                {
                                    $("#district_id").append('<option selected value="'+key+'">'+value+'</option>');
                                }
                                else{
                                    $("#district_id").append('<option value="'+key+'">'+value+'</option>');
                                }
                            });
                        }else{
                        $("#district_id").empty();
                        }
                    }
                });
            }

            if(editData.district_id)
            {
                $.ajax({
                    type:"GET",
                    url:"{{url('get-thana-list')}}?district_id="+editData.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(editData.thana_id == Number(key))
                            {
                                $("#thana_id").append('<option selected value="'+key+'">'+value+'</option>');
                            }
                            else{
                                $("#thana_id").append('<option value="'+key+'">'+value+'</option>');
                            }
                        });
                    }else{
                        $("#thana_id").empty();
                    }
                    }
                });
            }
        });
    </script>

    <script>
        $('#country_id').change(function() {
            var country_id = $(this).val();
            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){
                                $("#division_id").append('<option value="'+key+'">'+value+'</option>');
                            });
                        }else{
                        $("#division_id").empty();
                        }
                    }
                });
            }else {
                $("#division_id").empty();
                $("#district_id").empty();
                $("#thana_id").empty();
            }
        });
        $('#division_id').on('change',function() {
            var division_id = $(this).val();
            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){
                                $("#district_id").append('<option value="'+key+'">'+value+'</option>');
                            });
                        }else{
                        $("#district_id").empty();
                        }
                    }
                });
            }else{
                $("#district_id").empty();
                $("#thana_id").empty();
            }
        });
        $('#district_id').on('change',function(){
            var district_id = $(this).val();
            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){
                            $("#thana_id").append('<option value="'+key+'">'+value+'</option>');
                        });
                    }else{
                        $("#thana_id").empty();
                    }
                    }
                });
            }else{
                $("#thana_id").empty();
            }
        });

    </script>

    <script>
        //the maps api is setup above
        $(document).ready(function() {
            let lat = '{{$campus->latitude}}';
            let lon = '{{$campus->longitude}}';

            $('#latitude').keyup(function() {
                lat = $(this).val();
                initMap();
            });

            $('#longitude').keyup(function() {
                lon = $(this).val();
                initMap();
            });

            async function initMap() {

                var latlng = new google.maps.LatLng(lat,lon); //Set the default location of map

                var map = new google.maps.Map(document.getElementById('map'), {
                    center: latlng,
                    zoom: 11, //The zoom value for map
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    title: 'Place the marker for your location!', //The title on hover to display
                    draggable: true //this makes it drag and drop
                });
                google.maps.event.addListener(marker, 'dragend', function(a) {
                    console.log(a);
                    document.getElementById('latitude').value = a.latLng.lat().toFixed(4); //Place the value in input box
                    document.getElementById('longitude').value =  a.latLng.lng().toFixed(4); //Place the value in input box
                });
            };

            initMap();
        });
</script>
    <script>
        $(document).ready(function(){
            $('.institute-profile-tab-campus').addClass('active');
        });
    </script>
@endsection