@extends('layouts.app_pub')
@push('css')
@endpush
@section('content')
    <style>
        .content-wrapper {
            margin: auto !important;
        }
    </style>
    <style>
        .content-wrapper {
            margin: auto !important;
        }

        /* Add custom CSS for the note card */
        .note-card {
            background-color: #007bff;
            color: white;
            max-width: 45rem;
            margin: 0 auto;
            margin-top: 20px;
            /* Adjust the margin as needed */
            padding: 10px;
            border-radius: 5px;
        }






        /* Style the Datepicker container */
        .ui-datepicker {
            background: #f9f9f9;
            border: 1px solid #ccc;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* Style the header */
        .ui-datepicker-header {
            background: #4CAF50;
            color: white;
            border: none;
            border-radius: 6px 6px 0 0;
            padding: 10px;
        }

        /* Style the navigation buttons */
        .ui-datepicker-prev,
        .ui-datepicker-next {
            background: #45a049;
            color: white;
            padding: 5px;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Style the calendar cells */
        .ui-datepicker-calendar td a {
            background: #e7f4e4;
            color: #333;
            padding: 5px;
            border-radius: 4px;
            text-align: center;
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
        }

        /* Highlight today's date */
        .ui-datepicker-today a {
            background: #c8e6c9 !important;
            font-weight: bold;
        }

        /* Highlight selected date */
        .ui-datepicker-calendar .ui-state-active {
            background: #66bb6a !important;
            color: white !important;
        }
    </style>

    @inject('carbon', 'Carbon\Carbon')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <div class="d-inline p-2  text-dark" style="font-size: 26px; font-weight: bold">Registration Form</div>
                    <div class="d-inline p-2 text-white">


                    </div>
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i> Home</a>
                        </div>
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ URL::previous() }}" class="btn btn-sm btn-primary text-right"><i
                                    class="fas fa-arrow-circle-left"></i> Back</a>
                        </div>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>

    {{--
    "{{ route('notice.teacher_info.store') }}" --}}


    <!-- Main content -->
    <div row>
        <section class="content">
            <div class="container-fluid">
                <!-- Main row -->

                <div class="row">
                    <div class="col-md-3 col-xs-3 col-lg-3 col-sm-3">
                        {{-- <div class="note-card">
                            <div class="card-header">N.B: Application will be queued for review if you have made any change.
                            </div>
                        </div> --}}
                    </div>

                    <div class="col-md-6 col-xs-6  col-lg-6 col-sm-6">
                        <form action="{{ route('notice.teacher_info_register.store') }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="card-body">


                                <div class="form-group">
                                    <label for="nid"> NID: </label>
                                    <input id="nid" type="text" placeholder="Index Number"
                                        class="form-control @error('nid') is-invalid @enderror" name="nid"
                                        value="{{  old('nid') }}" onkeyup="validateNid()" required />
                                    @error('nid')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    <div id="nidNumberError" class="invalid-feedback" style="display: none;">
                                        The NID number must be between 10 and 17 digits long. If your NID length is 13,
                                        please append your birth year to it.
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="index_no">Index no: </label>
                                    <input id="index_no" type="text" placeholder="Index Number"
                                        class="form-control @error('index_no') is-invalid @enderror" name="index_no"
                                        value="{{  old('index_no') }}" onkeyup="setMpo()" />
                                    @error('index_no')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="is_teacher">Are you a teacher</label>
                                    <select id="is_teacher"
                                        class="js-example-basic-single form-control @error('is_teacher') is-invalid @enderror"
                                        name="is_teacher" required>


                                        <option value="1">Yes</option>
                                        <option value="0">No</option>

                                    </select>

                                </div>


                                <div class="form-group">
                                    <label for="is_mpo">Are you MPO registered</label>
                                    <select id="is_mpo"
                                        class="js-example-basic-single form-control @error('is_mpo') is-invalid @enderror"
                                        name="is_mpo" required>
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>

                                    </select>

                                </diV>

                                <div class="form-group">
                                    <label for="full_name">Full Name</label>
                                    <input id="full_name" type="text" placeholder="Full Name"
                                        class="form-control @error('full_name') is-invalid @enderror" name="full_name"
                                        value="{{ old('full_name') }}" required />
                                    @error('full_name')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label for="email">Email</label>
                                    <input id="email" type="email" placeholder="Email"
                                        class="form-control @error('email') is-invalid @enderror" name="email"
                                        value="{{  old('email') }}" required />
                                    @error('email')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                               
                                <div class="form-group">
                                    <label for="mobile_no">Phone Number</label>
                                    <input name="mobile_no" id="mobile_no" type="number" placeholder="Mobile no"
                                        class="form-control @error('mobile_no') is-invalid @enderror" title="mobile_no"
                                        value="{{ old('mobile_no') }}" required />
                                    @error('mobile_no')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="date">Date of Birth</label>
                                    <input name="dob" id="dob" type="text"
                                        class="form-control @error('date') is-invalid @enderror" title="date"
                                        value="{{ old('dob') }}" required />
                                    @error('date')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>




                               

                                    
                                        <div class="form-group">
                                            <label for="zone">Zone</label>
                                            <select id="zone_id"
                                                class="js-example-basic-single form-control @error('zone_id') is-invalid @enderror"
                                                name="zone_id">
                                                <option value="">Select Zones</option>
                                                @foreach ($zones as $zone)
                                                    <option value="{{ $zone->id }}">{{ $zone->zone_name }}</option>
                                                @endforeach
                                            </select>
                                            @error('zone_id')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                 
            
                                
                              
                                  
                                        <div class="form-group">
                                            <label for="selectDistrict">District Name</label>
                                            <select id="district_id"
                                                class="js-example-basic-single form-control @error('district_id') is-invalid @enderror"
                                                name="district_id"> </select>
                                            @error('district_id')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    
                             
                                        <div class="form-group">
                                            <label for="upazila_id">Upazila Name</label>
                                            <select id="upazila_id"
                                                class="js-example-basic-single form-control @error('upazila_id') is-invalid @enderror"
                                                name="upazila_id">
            
                                            </select>
                                            @error('upazila_id')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                             
                                  
                                        <div class="form-group">
                                            <label for="inastitute_id">Institute Name</label>
                                            <select id="inastitute_id"
                                                class="js-example-basic-single form-control @error('inastitute_id') is-invalid @enderror"
                                                name="inastitute_id">
            
            
                                            </select>
                                            @error('inastitute_id')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $message }}</strong>
                                                </span>
                                            @enderror
                                        </div>
                                    
                        

                                <div class="form-group">
                                    <label for="institute_dept">Institute Department</label>
                                    <select id="institute_dept"
                                        class="js-example-basic-single form-control @error('institute_dept') is-invalid @enderror"
                                        name="institute_dept">

                                        <option value="">Select Institute Department</option>
                                        @foreach ($institute_dept as $inst)

                                            <option value="{{ $inst->id }}">{{ $inst->name_short }} </option>

                                        @endforeach

                                    </select>
                                </diV>



                                <div class="form-group">
                                    <label for="course">Designation</label>
                                    <select id="selectCourse"
                                        class="js-example-basic-single form-control @error('course_id') is-invalid @enderror"
                                        name="designation">



                                        @foreach ($designation as $des)
                                            <option value="{{ $des->id }}">{{ $des->des_name }}</option>
                                        @endforeach


                                    </select>
                                </diV>


                                <div class="form-group">
                                    <label for="subject">Subject</label>
                                    <select id="subject"
                                        class="js-example-basic-single form-control @error('subject') is-invalid @enderror"
                                        name="subject">

                                        <option value="">Select Subject</option>
                                        @foreach ($subjects as $sub)

                                            <option value="{{ $sub->id }}">{{ $sub->sub_name }}</option>

                                        @endforeach
                                    </select>
                                </diV>


                           
                             


                                <div class="form-group">
                                    <label for="gender">Gender</label>
                                    <select id="gender"
                                        class="js-example-basic-single form-control @error('gender') is-invalid @enderror"
                                        name="gender" required>

                                        <option value="">Select Gender</option>
                                        <option value="1">Male</option>
                                        <option value="2">Female</option>

                                    </select>
                                </diV>





                                <div class="form-group">
                                    <input type="submit" class="btn btn-sm btn-success" value="Submit Application">
                                </div>

                            </div>
                        </form>
        </section>

@endsection



    <script>
        window.onload = function () {
            $(function () {
                $("#dob").datepicker({
                    dateFormat: "dd/mm/yy"
                });
                $("#pub").datepicker({
                    dateFormat: "dd/mm/yy"
                });


            });
        };


        function validateNid() {
            var nid = $('#nid').val().trim();
            var nidNumberError = $('#nidNumberError');
            if (nid.length < 13 || nid.length > 17) {
                nidNumberError.show();
                $('#nid').addClass('is-invalid');
                return false;
            } else {
                nidNumberError.hide();
                $('#nid').removeClass('is-invalid');
                return true;
            }
        }

        function setMpo() {
        
                if ($('#index_no').val().trim() !== '') {
                    $('#is_mpo').val('1'); // Set to "Yes"
                }
                else {
                    $('#is_mpo').val('0'); // Set to "No"
                }
        }

    </script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  if (typeof jQuery == 'undefined') {
    document.write('<script src="/path/to/local/jquery.min.js"><\/script>');
  }
</script>
    <script>
        
           $(document).ready(function() {
            $('select[name="zone_id"]').on('change', function() {
                var zone_id = $(this).val();
                if (zone_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/zone/district/' + zone_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            var res = '<option value="">Select District</option>';
                            $.each(data.district, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .district_name + '</option>';
                            });
                            $('select[name="district_id"]').html(res);
                        }

                    });

                }
            });
        });



        $(document).ready(function() {
            $('select[name="district_id"]').on('change', function() {
                var district_id = $(this).val();

                if (district_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/division/district/upazila/' + district_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            var res = '<option value="">Select Upazila</option>';
                            $.each(data.upazila, function(key, value) {
                                res +=
                                    '<option value="' + value.id + '">' + value
                                    .upazila_name + '</option>';
                            });
                            $('select[name="upazila_id"]').html(res);
                        }

                    });

                }
            });
        });
        $(document).ready(function() {
            $('select[name="upazila_id"]').on('change', function() {
                var upazila_id = $(this).val();

                if (upazila_id) {
                    $.ajax({
                        url: '{{ url('/') }}' + '/division/district/upazila/inastitute/' +
                            upazila_id,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            var res = '<option value="">Select Institute</option>';
                            $.each(data.inastitute, function(key, value) {
                                res +=
                                    '<option value="' + value.eiin + '">' + value
                                    .institute_name + ' - ' + value.eiin + '</option>';
                            });
                            $('select[name="inastitute_id"]').html(res);
                        }

                    });

                }
            });
        });


    </script>

    @push('js')
    @endpush