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


        .loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 8px solid #ccc;
  border-top: 8px solid #1d72b8;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
    </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">Notices</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> --}}
                            <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>
    @if (isset($noticefiles))
        <div class="container-fluid">
            <!-- Main row -->
            <div class="row">
                <div class="col-md-12 col-x-12 col-sm-12">
                    <table id="datatable" class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Tile </th>
                                <th scope="col">Corresponnding DSHE URL</th>
                                <th scope="col">Download</th>
                                <!-- <th scope="col">Memory Limit(MB)</th> -->
                                <th scope="col">Created At</th>
                                <th scope="col">Status</th>
                                <th scope="col">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($noticefiles as $key => $file)
                                <tr>
                                    <th scope="row">{{ $key + 1 }}</th>
                                    <td>
                                        {{ $file->title }}
                                    </td>
                                    <td>
                                        <a href="{{ '//' . $file->url }}" target="_blank"> Click Here </a>
                                    </td>
                                    <td>
                                        <a href="{{ route('noticefile.path', $file->id) }}" target="_blank">
                                            @if ($file->extension == 'pdf')
                                                <center>
                                                    <div><img src="{{ asset('dist/img/download.png') }}" alt="Dist Photo 1"
                                                            width="60px" height="45px"></div>
                                                </center><br>
                                            @elseif ($file->extension == 'csv' || $file->extension == 'xlsx' || $file->extension == 'xls')
                                                <center>
                                                    <div><img src="{{ asset('public/dist/img/excel-icon.png') }}" alt="Dist Photo 1"
                                                            width="70px" height="55px"></div>
                                                </center><br>
                                            @elseif($file->extension == 'doc' || $file->extension == 'docx')
                                                <center>
                                                    <div><img src="{{ asset('public/dist/img/word-icon.png') }}" alt="Dist Photo 1"
                                                            width="70px" height="55px"></div>
                                                </center><br>
                                            @else
                                                <center>
                                                    <div><img src="{{ asset('public/dist/img/icon.png') }}" alt="Dist Photo 1"
                                                            width="70px" height="55px"></div>
                                                </center><br>
                                            @endif
                                        </a>
                                    </td>
                                    <td>
                                        {{ $carbon::parse($file->created_at)->format('m/d/Y') }}
                                    </td>
                                    <td>
                                        {{-- @if ($file->status == 1)
                                        Published on: <br>
                                        {{ $carbon::parse($file->publish_date)->format('m/d/Y') }}
                                        @else
                                        <a href="{{ url('/notice/publish/' . $file->id) }}" class="btn btn-sm btn-info m-1"><i
                                                class="fas fa-edit"></i>
                                            Publish</a>
                                        @endif
                                        <hr> --}}
                                        @if ($file->application == 1 && $file->exp_date > $carbon::now() && $file->type == 1)
                                            <p style="color:green">Accepting Applications </p>
                                        @else
                                            <p style="color:red">Not Accepting Applications at the moment</p>
                                        @endif
                                    </td>
                                    <td>
                                        @if ($file->application == 1 && $file->exp_date > $carbon::now() && $file->type == 1)
                                            <button type="button" class="btn btn-sm btn-success m-1" data-toggle="modal"
                                                data-target="#myModal" id="${user.pds_id}"
                                                onclick="chooseDept({{ $file->id }},{{ $file->course_id }})"><i
                                                    class="fas fa-edit"></i>Apply</button>
                                        @else
                                                    <p style="color:red">Closed for applications</p>
                                                </td>
                                            </tr>
                                        @endif
                            @endforeach
                        </tbody>
                    </table>
    @endif
            </div>
        </div>
        <!-- /.row (main row) -->
    </div>
    </div>

    <div id="loader" class="loader-overlay" style="display: none;">
        <div class="spinner"></div>
      </div>
    </section>
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title"> <i class="fa fa-id-badge" aria-hidden="true"></i> Apply</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body" id="gg">
                    <form action='{{ route('notice.teacher') }}' id="H_table">
                    </form>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="reload()">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<script>
    function reload() {
        window.location.reload();
    }
    function chooseDept(id, course_id) {
        console.log('hi');
        let htmlTemplate = '';
        htmlTemplate =
            `<div class="form-group">
    <label for="pds">Select Insititute Category :</label>
    <select id="inst_category" name="inst_category".
                                    class="searchable_select js-example-basic-single form-control @error('aoe') is-invalid @enderror">
                                   <option value='1'>DSHE</option>
                                   <option value='2'>Madrasa</option>
                                   <option value='3'>Technical</option>
                                </select>
                                <span id="error"></span>
  </div>
  <button type="button" class="btn btn-sm btn-success m-1" onclick="proceed(${id},${course_id})"><i class="fas fa-edit"></i>Proceed</button> `;
        document.querySelector('#H_table').innerHTML = htmlTemplate;
    }
    function proceed(id, course_id) {
        var inst_category = $("#inst_category").val();
        console.log(id);
        console.log(course_id);
        console.log(inst_category);
        if (inst_category == 1) {
            history(id, course_id);
        } else {
            let htmlTemplate =
                `<h3 style="color:green"> <b>You must register inorder to continue the application process</b>`;
            htmlTemplate += ` <form action="{{ route('notice.teacher.register') }}" method="POST">
                        @csrf
                        <input type='number' id='notice_id' value='${id}' name='notice_id' hidden>
                        <input type='number' id='course_id' value='${course_id}' name='course_id' hidden>
                        <button type="submit" class="btn btn-primary btn-success"> Register</button>
                        </form>
                        `
            // htmlTemplate =
            //     `<h3 style="color:green"> <b>Congratulations!</b> You have been added to teachers poll</h3>`
            document.querySelector('#gg').innerHTML = htmlTemplate;
        }
    }
    var x = 1;
    function history(id, course_id) {
        // console.log(id);
        // console.log(course_id);
        // var roleId = $("#selectRole").val();
        let htmlTemplate = '';
        htmlTemplate = `
  <div class="form-group">
    <label for="pds">PDS ID :</label>
    <input type="text" class="form-control" id="pds" name="pds" aria-describedby="pds" placeholder="Input Pds ID" required>
  </div>
  <div class="form-group">
    <label for="dob">Date of birth <small>As per PDS*</small>:</label>
    <input type="text" class="form-control" id="dob" name="dob" aria-describedby="dob" required ">
    </div>
   <input type='number' id='notice_id' value='${id}' name='notice_id' hidden>
   <input type='number' id='course_id' value='${course_id}' name='course_id' hidden>
  <button type="button" onclick="check_pds()" class="btn btn-primary">Submit</button>
`
        document.querySelector('#H_table').innerHTML = htmlTemplate;
        $('input[name="dob"]').daterangepicker({
            singleDatePicker: true,
            locale: {
                format: 'DD/MM/YYYY'
            }
        })
    }
    function check_pds() {
        var pds = $("#pds").val();
        var dob = $("#dob").val();
        var course_id = $("#course_id").val();
        var notice_id = $("#notice_id").val();
        var JsonData = {
            pds: pds,
            dob: dob,
            course_id: course_id,
            notice_id: notice_id,
            _token: "{{ csrf_token() }}"
        }
        $.ajax({
            url: '{{ route('notice.teacher') }}',
            type: "POST",
            dataType: "json",
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: JsonData,
            beforeSend: function() {
                $('#loader').show();
             },
            success: function (data) {
                $('#loader').hide();
                if (data == '1') {
                    let htmlTemplate = '';
                    htmlTemplate = `<h3>Your Pds id is inavlid</h3>
                        <a href="{{ url('//www.dshe.gov.bd/') }}" class="btn btn-sm btn-success m-2"> <h4><i class="fas fa-edit"></i>
                                               Register for PDS ID </h4></a>`
                    document.querySelector('#gg').innerHTML = htmlTemplate
                } else if (data == '2') {
                    let htmlTemplate =
                        `<h3 style="color:green"> <b>Congratulations!</b> You are eligible for this course`;
                    htmlTemplate += ` <form action="{{ route('notice.teacher.update') }}" method="POST">
                        @csrf
                        <input type='number' id='pds' value='${pds}' name='pds' hidden>
                        <input type='number' id='notice_id' value='${notice_id}' name='notice_id' hidden>
                        <input type='number' id='course_id' value='${course_id}' name='course_id' hidden>
                        <button type="submit" class="btn btn-primary btn-success"> Proceed</button>
                        </form>
                        `
                    // htmlTemplate =
                    //     `<h3 style="color:green"> <b>Congratulations!</b> You have been added to teachers poll</h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                } else if (data == '3') {
                    let htmlTemplate = '';
                    htmlTemplate =
                        `<h3 style="color:blue">You have already applied for this course once</h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                } else if (data == '4') {
                    let htmlTemplate = '';
                    htmlTemplate =
                        `<h3 style="color:blue">Incorrect date of birth! Please try again.</h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                } else if (data == '8') {
                    let htmlTemplate = '';
                    htmlTemplate =
                        `<h3 style="color:blue"> You are already enrolled in an active batch. </h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                } else if (data == '42') {
                    let htmlTemplate = '';
                    htmlTemplate =
                        `<h3 style="color:orange">Your previous application is still in process. </h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                } else if (data == '44') {
                    let htmlTemplate = '';
                    htmlTemplate =
                        `<h3 style="color:orange">You have already completed this training. </h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                }
                else if (data == '404') {
                    let htmlTemplate =
                        `<h3 style="color:orange">You do not meet the criterias for this course. </h3>`
                    document.querySelector('#gg').innerHTML = htmlTemplate;
                }
            },

                error: function (xhr) {
                    $('#loader').hide();
                // Parse and display the error message
                let errorMessage = 'An unexpected error occurred.';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMessage = xhr.responseJSON.error;
                }
                document.querySelector('#gg').innerHTML = `<h3 style="color:red">${errorMessage}</h3>`;
            }
        });
    }
</script>