@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Edit Assignment</title>

@include('datepicker')
@section('main-content')
    <style>
        .input {
            color: #697a8d;
        }

        .icon-btn {
            margin-right: 5px;
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }
    </style>
    
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Edit Plan</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Plan</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label" for="basic-icon-default-classname">Title</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-classname" class="input-group-text"><i
                                            class='bx bxs-star-half'></i></span>
                                    <input type="text" value="{{ $mealPlan->title }}" id="title"
                                        class="form-control" />
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" for="basic-icon-default-classname">Class</label>
                                <div class="input-group">
                                    <span id="basic-icon-default-classname" class="input-group-text"><i
                                            class='bx bxs-star-half'></i></span>
                                    <input type="text" value="{{ $class_name }}" id="class_name" class="form-control"
                                        readonly autocomplete="off" />
                                </div>
                            </div>

                            <div class="form-group row mb-2">
                                <div class="col-12 col-md-6 mb-2">
                                    <label class="form-label" for="questionTitle">Uploaded File</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-gender" class="input-group-text"><i
                                                class='bx bxs-file-pdf'></i></span>
                                        <a class="form-control" href="{{ $mealPlan->file }}"
                                            target="_blank">{{ $mealPlan->file }}</a>
                                    </div>
                                </div>
                                <div class="col-12 col-md-6 mb-2">
                                    <label class="form-label" for="questionTitle">Upload New File</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-gender" class="input-group-text"><i
                                                class='bx bxs-file-pdf'></i></span>
                                        <input type="file" id="upload_file" name="file" accept="application/pdf"
                                            class="form-control">
                                    </div>
                                    <div class="form-text">Upload only single pdf file ( <strong>Max size: 2MB</strong> )
                                    </div>
                                </div>

                            </div>
                            <div class="form-group row">
                                <div class="col-12 col-md-6 mb-2">
                                    <label class="form-label" for="questionTitle">Start Date</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-gender" class="input-group-text"><i
                                                class='bx bx-calendar'></i></span>
                                        <input type="text" id="start_date" name="Start Date"
                                            value="{{ date('d-m-Y', strtotime($mealPlan->start_date)) }}"
                                            class="form-control" readonly autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <label class="form-label" for="questionTitle">End Date</label>
                                    <div class="input-group">
                                        <span id="basic-icon-default-gender" class="input-group-text"><i
                                                class='bx bx-calendar'></i></span>
                                        <input type="text" id="end_date" name="End Date"
                                            value="{{ date('d-m-Y', strtotime($mealPlan->end_date)) }}" class="form-control"
                                            readonly autocomplete="off">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group loaderbtn_div mt-3">
                                <button id="save_btn" class="btn btn-success" onclick="getsubject()">Save</button>
                                <div class="loaderDiv" id="loader" style="display: none;">
                                    <!-- Your loader HTML or spinner goes here -->
                                    <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>

    <script>
        jQuery.noConflict();

        // Now use jQuery instead of $ to avoid conflicts
        jQuery(document).ready(function($) {
            let maxi = new Date(),
                mini = new Date();
            maxi.setFullYear(maxi.getFullYear() + 1);
            $("#start_date").datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: mini,
                minDate: mini,
                maxDate: maxi,
                changeMonth: true,
                changeYear: true,
                onSelect: function(dateText, inst) {
                    getCurrentYr = dateText.substring(6);
                    getCurrentMnt = dateText.substring(3, 5);
                    getCurrentDt = dateText.substring(0, 2);
                }
            }).on('click', function() {
                $(this).datepicker('show');
            });

            $("#end_date").datepicker({
                dateFormat: "dd-mm-yy",
                defaultDate: mini,
                minDate: mini,
                maxDate: maxi,
                changeMonth: true,
                changeYear: true,
                onSelect: function(dateText, inst) {
                    getCurrentYr = dateText.substring(6);
                    getCurrentMnt = dateText.substring(3, 5);
                    getCurrentDt = dateText.substring(0, 2);
                }
            }).on('click', function() {
                $(this).datepicker('show');
            });
        });

        function getsubject() {
            $('.text-danger').remove();
            $('#loader').show();
            const class_name = ($("#class_name").val()).trim();
            const start_date = ($("#start_date").val()).trim();
            const end_date = ($("#end_date").val()).trim();
            const title = ($("#title").val());
            const upload_file = $('#upload_file').prop('files')[0];

            var formData = new FormData();
            if (upload_file) {
                formData.append('upload_file', upload_file);
            }
            formData.append('class_name', class_name);
            formData.append('start_date', start_date);
            formData.append('end_date', end_date);
            formData.append('title', title);

            $.ajax({
                type: "post",
                url: "/mealplanner/{{ $mealPlan->id }}",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {

                    $('#loader').hide();
                    const status = data["status"];
                    if (status == 200) {
                        window.location.href = data.success;
                    } else {
                        const error_code = data["error_code"];
                        if (error_code == 2 || error_code == 3) {
                            if (!$('#save_btn').closest('div').next().hasClass('text-danger')) {
                                $('#save_btn').closest('div').after('<span class="text-strong text-danger">' +
                                    data.message + '</span>');
                            }
                        }

                        $.each(data.error, function(field_name, error) {
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error + '</span>');
                            }
                        });
                    }
                },
                error: function() {
                    $('#loader').hide();
                },
                complete: function() {
                    $('#loader').hide();
                }
            });
        }
    </script>
@endsection