@extends('student.layouts.layout')
@section('content')
    <div class="pxp-dashboard-content-details">
        
      <h4>Request Letter Form</h4> 
            
        @if(empty($stutRequestLetterData[0]->id))
            <form action="{{ route('student.request.letter.store') }}" method="post"  enctype="multipart/form-data">
                
        @else
            <form action="{{ route('student.request.letter.store') }}" method="post"  enctype="multipart/form-data">

        @endif

            @csrf

            <input type="hidden" name="id" id="id" value="{{ !empty($stutRequestLetterData[0]->id) ? $stutRequestLetterData[0]->id : '' }}">
                
            <style>
                .select2-container--default .select2-selection--single .select2-selection__arrow
                {
                    right: 27px !important;
                }

                .pxp-dashboard-content-details form textarea 
                {
                    height: 100px !important;
                }
            </style>
            
            <div class="row mt-2">
                <select class="form-control" id="country" 
                    name="country" required>
                    <option value="">Select Country</option>
                    @if(!empty($countries))
                       @foreach ($countries ?? [] as $country)
                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                        @endforeach
                    @endif
                </select>
                @if ($errors->has('country'))<span class="text-danger">
                    {{ $errors->first('country') }}</span>@endif 
            </div>
            
            <div class="row mt-2">
                <select class="form-control" id="university" 
                    name="university" required>
                    <option value="">Select University</option>
                </select>
                @if ($errors->has('university'))<span class="text-danger">
                    {{ $errors->first('university') }}</span>@endif 
            </div>
            
            <div class="row mt-2">  
                <div class="col-md-12">
                    <input type="text" class="form-control" name="name" id="name" placeholder="Name" value="{{ !empty(!empty(Session::get('sessionData')[0]->firstname)) ? Session::get('sessionData')[0]->firstname.' '.Session::get('sessionData')[0]->lastname : '' }}" readonly required>
                    @if ($errors->has('name'))<span class="text-danger">{{ $errors->first('name') }}</span>@endif 
                </div>
            </div>

            <div class="row mt-2">
                <div class="col-md-12">
                    <input type="email" class="form-control" name="email" id="email" placeholder="Email" value="{{ !empty(!empty(Session::get('sessionData')[0]->email)) ? Session::get('sessionData')[0]->email : '' }}" readonly required>
                    @if ($errors->has('email'))<span class="text-danger">{{ $errors->first('email') }}</span>@endif 
                </div>
            </div>

            <div class="row mt-2">
                <div class="col-md-12">
                    <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" value="{{ !empty($stutRequestLetterData[0]->subject) ? $stutRequestLetterData[0]->subject : '' }}" required>
                    @if ($errors->has('subject'))<span class="text-danger">{{ $errors->first('subject') }}</span>@endif 
                </div>
            </div>

            <div class="row mt-2">
                <div class="col-md-12">
                    <textarea class="form-control" name="message" id="message" cols="2" placeholder="Message" required>{{ !empty($stutRequestLetterData[0]->message) ? $stutRequestLetterData[0]->message : '' }}</textarea>
                    @if ($errors->has('message'))<span class="text-danger">{{ $errors->first('message') }}</span>@endif 
                </div>
            </div>

           <div class="row mt-2">
                <div class="col-md-12">
                    <input type="file" class="form-control" name="request_letter" id="request_letter">
                </div>
            </div>


                
            @if(empty($stutRequestLetterData[0]->id))
            <div class="row mt-2">
                <div class="col-md-12">
                    <button type="submit" class="btn btn-block btn-primary">Submit</button>
                </div>
            </div>
            @endif



        </form>

      
    </div>

@endsection



@section('pagescriptcode')
    <script type="text/javascript">
        $(function () {
        
            $('#country').select2({
                placeholder: 'Select Country',
            });

            $('#university_id').select2({
                 placeholder: 'Select University',
            });
        });
        
       $(document).ready(function() {
            $('#country').change(function() {
                var countryId = $(this).val();

                if (countryId) {
                    $.ajax({
                        // headers: {
                        //     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        // },
                        url: "{{ route('student.request.letter.university') }}?countryId="+countryId,
                        type: 'GET',
                        // data: {
                        //     country_id: countryId
                        // },
                        dataType: 'json',

                        success: function(data) {
                            // console.log(data);
                            $('#university').empty();
                            $('#university').append(
                                '<option value="">Select University</option>');
                            $.each(data, function(key, value) {
                                $('#university').append('<option value="' + value.id +
                                    '">' + value.university_name + '</option>');
                            });
                        }
                    });
                } else {
                    $('#state').empty();
                    $('#state').append('<option value="">Select State</option>');
                }
            });
        });


    </script>    
@endsection