@extends('layouts.master')

@section('title', 'Express54')

@section('content')
<div class="p-5 bgImage" style="min-height: calc(100vh - 110px)">
    <div class="card mx-4 mx-md-5 shadow-5-strong" style="backdrop-filter: blur(30px);">
        <div class="card-body px-md-6">
            <div class="row d-flex justify-content-center">
                <div id="alert-container">
                    @if (Session('error'))
                    <div class="alert alert-warning" role="alert">
                        {{ Session('error') }}
                    </div>
                    @endif

                    @if (Session('success'))
                    <div class="alert alert-success" role="alert">
                        {{ Session('success') }}
                    </div>
                    @endif
                </div>
                <!-- alert time out  -->
                <script>
                document.addEventListener("DOMContentLoaded", function() {
                    var alertContainer = document.getElementById("alert-container");
                    if (alertContainer) {
                        setTimeout(function() {
                            alertContainer.remove();
                        }, 5000);
                    }
                });
                </script>

                <form action="{{route('student.update')}}" method="POST">
                    @csrf
                    <a href="{{ route('minister_supervisor.etudiants-aappouver') }}" class="btn btn-lg btn-danger rounded-pill px-3">
                        <i class="fa-solid fa-arrow-left"></i>
                        @lang('messages.back')
                    </a>
                    <input type="hidden" class="form-control" name="id" id="id" value="{{$student->id}}">
                    <input type="hidden" class="form-control" name="minister_supervisor_approval" id="approvalInput" value="">
                    
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Genre
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="genre" value="{{$student->genre}}" disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Niveau d'étude
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="niveau_etude" value="{{$student->niveau_etude}}" disabled>
                        </div>
                    </div>
                    
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Nom
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="name" value="{{$student->name}}" disabled>
                        </div>

                        <label for="" class="col-sm-2 col-form-label">Email</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="email" value="{{$student->email}}" disabled>
                        </div>
                    </div>

                                        
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Type de Bourse
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="type_bourse" value="{{ $typeBourseLabels[$student->type_bourse] ?? 'Inconnu' }}"
                                disabled>
                        </div>
                        <label for="" class="col-sm-2 col-form-label">Pays
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="country_name"
                                value="{{$student->country_id ?? ''}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Filière
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="field" value="{{$student->field}}"
                                disabled>
                        </div>
                        <label for="" class="col-sm-2 col-form-label">Année d'étude
                            :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="year_of_study"
                                value="{{$student->year_of_study}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <label for="" class="col-sm-2 col-form-label">Université :</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="institution"
                                value="{{$student->institution}}" disabled>
                        </div>
                        <label for="" class="col-sm-2 col-form-label">Montant total</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="total_amount"
                                value="{{$student->total_amount}}" disabled>
                        </div>
                    </div>
                    <div class="form-group row p-3">
                        <center>
                            <div class="col-sm">
                                <button id="showAcceptReasonBtn" class="btn btn-lg btn-success rounded-pill px-3">
                                    @lang('messages.accept')
                                </button>

                                <button id="showRejectReasonBtn" class="btn btn-lg btn-danger rounded-pill px-3">
                                    @lang('messages.reject')
                                </button>
                            </div>
                        </center>
                    </div>
                    <center>
                        <div class=" col-sm-3" id="reasonContainer"></div>

                    </center>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// When the Accept button is clicked
$('#showAcceptReasonBtn').click(function() {
    var inputDiv = $('<div>', {
        class: 'class="col-sm-3',
    });
    var reasonInput = $('<input>', {
        type: 'text',
        id: 'reasonInput',
        name: 'accept_reason',
        placeholder: 'Enter reason',
        class: 'form-control'
    });
    var status = $('<input>', {
        type: 'hidden',
        id: 'reasonInput',
        name: 'minister_supervisor_approval',
        placeholder: 'Enter reason',
        class: 'form-control',
        value: 'approve'
    });
    var submitDiv = $('<div>', {
        id: 'submitReasonDiv',
        style: 'margin-top: 20px;'
    });
    var submitBtn = $('<button>', {
        type: 'submit',
        id: 'submitReason',
        text: 'Submit',
        class: 'btn btn-lg btn-success rounded-pill px-3',
    });
    var label = $('<label>', {
        for: 'reasonInput',
        text: 'Accept Reason:',
        class: 'col-sm-3 col-form-label '

    });
    $('#reasonContainer').append(label, inputDiv, submitDiv, status);
    submitDiv.append(submitBtn);
    inputDiv.append(reasonInput);
    event.preventDefault();
});

$('#submitReason').click(function() {
    $('#approvalInput').val('approve');

});

// When the Reject button is clicked
$('#showRejectReasonBtn').click(function() {
    var reasonInput = $('<input>', {
        type: 'text',
        id: 'reasonInput',
        name: 'reject_reason',
        placeholder: 'Enter reason',
        class: 'form-control'
    });
    var status = $('<input>', {
        type: 'hidden',
        id: 'reasonInput',
        name: 'minister_supervisor_approval',
        placeholder: 'Enter reason',
        class: 'form-control',
        value: 'reject'
    });
    var submitDiv = $('<div>', {
        id: 'submitReasonDiv',
        style: 'margin-top: 20px;'
    });
    var submitBtn = $('<button>', {
        type: 'submit',
        id: 'submitRejectReason',
        text: 'Submit',
        class: 'btn btn-lg btn-success rounded-pill px-3',
    });
    var label = $('<label>', {
        for: 'reasonInput',
        text: 'Reject Reason:',
        class: 'col-sm-3 col-form-label logincol'

    });
    $('#reasonContainer').append(label, reasonInput, submitDiv, status);
    submitDiv.append(submitBtn);
    event.preventDefault();
});
$('#submitRejectReason').click(function() {

});
</script>
@endsection