@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Holiday</title>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

@section('main-content')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="{{asset('assets/css/pop_up_with_image.css')}}"/>

<style>
    .input {
        color: #697a8d;
    }

    #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 id="alert" class="col-md-6">
    @if(Session::has('success'))
    <div class="alert alert-primary" role="alert">
        {{Session::get('success')}}
    </div>
    @endif
</div>


<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-1"><span class="text-muted fw-light"></span>Holidays Detail</h4>
        <div class="m-2 text-end">
            <a href="{{ route('holidays.create') }}" class="btn btn-primary text-white">Add Holidays</a>
            <a class="btn btn-primary m-2" href="{{ route('holidays.edit', ['holiday' => $holiday->id]) }}"><i class="bx bx-edit-alt me-1"></i> Edit</a>
        </div>
        <!-- Basic Layout -->
        <div class="row" id="person_1">
            <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">Holiday </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-md-4 mb-3 {{$holiday->image?"":"d-none"}}">
                                <img src="{{$holiday->image}}" class="img-thumbnail"/>
                            </div>

                            <div class="col-12 {{$holiday->image?"col-md-8":""}} mb-3">
                                <label class="form-label" for="basic-icon-default-fullname">Name</label>
                                <input type="text" name="name" id="name" placeholder="Holiday Name" class="form-control input form-control-line bg-white mb-3" minlength="3" maxlength="30" onkeydown="return /[a-zA-Z0-9_\s-]/.test(event.key)" autocomplete="off" readonly value="{{$holiday->name}}">

                                <label class="form-label" for="basic-icon-default-fullname">Type</label>
                                <select name="holiday_type" id="holiday_type" class="form-control input form-control-line bg-white mb-3" disabled>
                                    <option value="1" {{$holiday->type==1?"selected":""}}>Government</option>
                                    <option value="2" {{$holiday->type==2?"selected":""}}>School</option>
                                </select>

                                <div class="row">
                                    <div class="col-12 col-md-4 mb-3">
                                        <label class="form-label" for="basic-icon-default-email">Start Date</label>
                                        <input type="text" placeholder="Start Date" class="form-control input form-control-line bg-white" name="start_date" id="start_date" readonly autocomplete="off" value="{{dateformatter($holiday->start_date)}}">
                                    </div>
                                    <div class="col-12 col-md-4 mb-3">
                                        <label class="form-label" for="basic-icon-default-email">End Date</label>
                                        <input type="text" placeholder="End Date" class="form-control input form-control-line bg-white" name="end_date" id="end_date" readonly autocomplete="off"  value="{{dateformatter($holiday->end_date)}}">
                                    </div>
        
                                    <div class="col-12 col-md-4 mb-3">
                                        <label class="form-label" for="basic-icon-default-email">Duration ( in days )</label>
                                        <input type="text" placeholder="Duration" class="form-control input form-control-line bg-white" name="duration" id="duration" autocomplete="off" disabled value="{{substr($holiday->duration,0,1)}}">
                                    </div>
                                </div>

                                <div class="row ">
                                    <label class="form-label" for="basic-icon-default-email">Description ( optional )</label>
                                    <div class="input-group">
                                        <textarea class="form-control bg-white" readonly rows="4" style="resize: none; overflow-y: auto; max-height: 500px;" maxlength="1000" id="description">{{$holiday->description}}</textarea>
                                    </div>
                                    <div class="text-end">Max Description: 1000 characters</div>
                                </div>
  
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- The Modal -->
    <div id="myModal" class="modal" style="padding-top: 50px;">

        <!-- Modal content -->
        <div class="modal-content" style="width: 40%;">
        <div><span class="close text-end">&times;</span></div>
        <h4 class="text-center" id="text_in_modal"></h4>
        <div class="text-center mb-5">
            <img src="{{URL::asset('assets/images/users/avatar.jpg')}}" id="card_pic" height="470" width="540"/>
        </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>


<script>

    function handleFileChange(event,pass_val,tag_id) {
        if(event.target.files[0]){
            $("#"+tag_id).removeClass("d-none");
        }else{
            $("#"+tag_id).addClass("d-none");
        }
    }

    var modal = document.getElementById("myModal");
    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() {
      modal.style.display = "none";
    }

    window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
    }

    function openModalForPreviouslyUploaded(text_to_include, image_url){
      modal.style.display = "block";

      $("#text_in_modal").html(text_to_include);

      const imgElement = document.getElementById('card_pic');
      imgElement.src = image_url;

    }

    function openingModal(text_to_include){
        var modal = document.getElementById("myModal");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        modal.style.display = "block";
        let fileInput, file ;

        fileInput = document.getElementById('image');
        $("#text_in_modal").html(text_to_include);

        file = fileInput.files[0];
        const imgElement = document.getElementById('card_pic');

        if (file) {
            const fileURL = URL.createObjectURL(file);
            imgElement.src = fileURL;
        }
    }

    function updateHoliday() {
        const msg = confirm("You want to update following Holiday ?"); 
        if(msg==false){
            return;
        }
        $('.text-danger').remove();
        $('input').removeClass('is-invalid');
        $('select').removeClass('is-invalid');
        $('#save_btn').prop("disabled", true);
        $('#loader').show();

        const name = ($("#name").val()).trim();
        const holiday_type = $("#holiday_type").val()?$("#holiday_type").val():"";
        const start_date = ($("#start_date").val()).trim();
        const end_date = ($("#end_date").val()).trim();
        const duration = ($("#duration").val()).trim();
        const image = $('#image').prop('files')[0];
        const description = ($("#description").val()).trim();


        var formData = new FormData();
        formData.append('holiday_id',  {{$holiday->id}});
        formData.append('name', name);
        formData.append('holiday_type', holiday_type);
        formData.append('start_date', start_date);
        formData.append('end_date', end_date);
        formData.append('duration', duration );
        formData.append('description',description);
        formData.append('image', image?image:"");

        formData.append('_method', 'PUT');
        const updateUrl = "{{ route('holidays.update', $holiday->id) }}";


        $.ajax({
            type: "post",
            url: updateUrl,
            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) {
                const status = data["status"];

                if (status == 400) {
                    const error_code = data["error_code"];

                    if (error_code === 1) {
                        $.each(data["errors"], function(field_name, error) {
                            // Check if the error message for the field already exists
                            if((field_name=="image" && (!$(`#image`).closest('div').next().hasClass('text-danger')))
                                || (field_name=="description" && (!$(`#description`).closest('div').next().hasClass('text-danger')))){
                                $(`#${field_name}`).closest('div').after('<div class="text-strong text-danger">' + error + '</div>');
                            }
                            else if (!$(`#${field_name}`).closest('div').next().hasClass('text-danger')) {
                                $(`#${field_name}`).addClass('is-invalid');
                                $(`#${field_name}`).closest('div').append('<span class="text-strong text-danger">' + error + '</span>');
                            }
                        });

                        const firstErrorElement = $('.is-invalid').first();
                        if (firstErrorElement.length) {
                            $('html, body').animate({
                                scrollTop: firstErrorElement.offset().top - 20 // Adjust the offset as needed
                            }, 500);
                        }
                    }
                    else if(error_code === 2){
                        if (!$(`#loaderbtn_div`).closest('div').next().hasClass('text-danger')) {
                            $(`#loaderbtn_div`).closest('div').after('<span class="text-strong text-danger">Something went wrong. Please try again later.</span>');
                        }
                    }

                } else {
                    window.location.href = data.redirect;
                }
                $('#save_btn').prop("disabled", false);

            },
            error: function() {
                // Hide loader in case of an error
                $('#loader').hide();
                $('#save_btn').prop("disabled", false);

                // Handle error
            },
            complete: function() {
                // Hide loader when the request is completed (success, error, or failure)
                $('#loader').hide();
                $('#save_btn').prop("disabled", false);

            }
        });
    }
</script>

@endsection