@extends('layouts.mop_master')
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.css"
        integrity="sha512-MpdEaY2YQ3EokN6lCD6bnWMl5Gwk7RjBbpKLovlrH6X+DRokrPRAF3zQJl1hZUiLXfo2e9MrOt+udOnHCAmi5w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="{{ URL::asset('assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .loader-div {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 99;
            display: flex;
            align-items: center;
            justify-content: center;

        }

        .loader {
            width: 60px;
            aspect-ratio: 1;
            animation: l5-0 1s infinite steps(1);
        }

        .loader::before,
        .loader::after {
            content: "";
            position: absolute;
            inset: 0 50% 50% 0;
            transform-origin: bottom right;
            animation:
                l5-1 0.5s infinite linear alternate,
                l5-2 0.5s infinite steps(1) alternate;
        }

        .loader::after {
            --s: -1, -1;
        }


        /* .select2-container .select2-selection--single .select2-selection__rendered {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    white-space: pre ! important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                } */
        /* table tr td .stock-item+.select2-container {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    min-width: 200px !important;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                } */

        @keyframes l5-0 {
            0% {
                transform: scale(1, 1) rotate(0deg)
            }

            50% {
                transform: scale(1, -1) rotate(90deg)
            }
        }

        @keyframes l5-1 {
            0% {
                transform: scale(var(--s, 1)) perspective(150px) rotateX(0deg)
            }

            100% {
                transform: scale(var(--s, 1)) perspective(150px) rotateX(180deg)
            }
        }

        @keyframes l5-2 {
            0% {
                background: #25b09b
            }

            50% {
                background: #514b82
            }
        }

        .alertify .ajs-footer .ajs-buttons .ajs-ok {
            background-color: #28a745;
            /* Green */
            color: #fff;
            border-radius: 6px;
            padding: 6px 14px;
            font-weight: bold;
            border: none;
            transition: background 0.2s;
        }

        .alertify .ajs-footer .ajs-buttons .ajs-ok:hover {
            background-color: #218838;
            /* Darker green */
        }

        /* Cancel Button */
        .alertify .ajs-footer .ajs-buttons .ajs-cancel {
            background-color: #dc3545;
            /* Red */
            color: #fff;
            border-radius: 6px;
            padding: 6px 14px;
            font-weight: bold;
            border: none;
            transition: background 0.2s;
        }

        .alertify .ajs-footer .ajs-buttons .ajs-cancel:hover {
            background-color: #c82333;
            /* Darker red */
        }

        .fc-daygrid-day-number {
            color: black;
            font-size: 24px !important;
            font-weight: 600 !important;
            margin: 2px !important;
        }

        #calendar td.fc-day-sun .fc-daygrid-day-number {
            color: red;
        }

        .fc-event-title.fc-sticky {
            font-size: 24px !important;
            display: flex !important;
            justify-content: center !important;
        }

        @media only screen and (max-width: 600px) {
            .fc-event-title.fc-sticky {
                font-size: 12px !important;
            }
        }

        @media only screen and (max-width: 420px) {
            .fc-event-title.fc-sticky {
                font-size: 8px !important;
            }
        }

        .fc .fc-daygrid-day.fc-day-today {
            background-color: #289bff59 !important;
        }
    </style>
@endsection
@section('title')
    Production Calender
@endsection
@section('content')
    <main style="position: relative">
        <div class="loader-div" style="visibility: hidden;">
            <div class="loader"></div>
        </div>
        <div class="page-breadcrumb ">
            <div class="d-flex justify-content-between align-items-center">
                <h4 class="page-title text-uppercase font-medium p-3">Production Calender</h4>
                <div>
                    @can('shuffle production')
                        <button type="button" class="btn btn-primary" id="shuffle">
                            Shuffle
                        </button>
                    @endcan
                    <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#exampleModal">
                        Color Code
                    </button>
                </div>
            </div>
        </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="box-shadow white-box border-top3x">
                        <div class="row">
                            <div class="col-md-12">
                                <div id='calendar'></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Color Codes</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-bordered">
                            <tr>
                                <td style="width: 50px;">Color</td>
                                <td style="width: 50px;">Description</td>
                            </tr>
                            <tr>
                                <td class="text-center"> <span class="p-2"
                                        style="background-color:green;min-width: 50px;min-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>date are less than today</td>
                            </tr>
                            <tr>
                                <td class="text-center"> <span class="p-2"
                                        style="background-color:red;min-width: 50px;min-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>Over 3 days after the production date Ecxeeded</td>
                            </tr>
                            <tr>
                                <td class="text-center"> <span class="p-2"
                                        style="background-color:blue;min-width: 50px;min-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>Production limit and item quantity equal</td>
                            </tr>
                            <tr>
                                <td class="text-center"> <span class="p-2"
                                        style="background-color:orange;min-width: 50px;min-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>Going to exceed production date plus 3 days</td>
                            </tr>
                            <tr>
                                <td class="text-center"> <span class="p-2"
                                        style="background-color:lightblue;min-width: 50px;min-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>quantity less than production limit</td>
                            </tr>
                            <tr>
                                <td class="text-center"> <span class="p-2"
                                        style="background-color:#ac0823;min-width: 50px;min-height: 50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                </td>
                                <td>Prouction limit exceeded </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="production_orders_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <form action="/admin/update-production-dates" id="production_orders_form" method="POST">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Production Orders</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="production_orders_body">

                        </div>
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                                @can('update production date')
                                    <button type="submit" class="btn btn-primary">Update</button>
                                @endcan
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </main>
@endsection
@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.11/index.global.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js"
        integrity="sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"
        integrity="sha512-rstIgDs0xPgmG6RX1Aba4KV5cWJbAMcvRCVmglpam9SoHZiUCyQVDdH2LPlxoHtrv17XWblE/V/PP+Tr04hbtA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script>
        let calendarEl = document.getElementById('calendar');
        let calendar;
        $(document).ready(function() {
            calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 'auto',
                timeZone: 'local',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,listWeek'
                },
                events: {
                    url: '/admin/get-production-calender-report',
                    method: 'POST',
                    extraParams: {
                        _token: '{{ csrf_token() }}',

                    },
                    failure: function() {
                        alert('there was an error while fetching events!');
                    },
                    color: 'yellow', // a non-ajax option
                    textColor: 'black' // a non-ajax option
                },
                showNonCurrentDates: false,
                eventClick: function(info) {
                    var date = info.event.startStr;
                    $.ajax({
                        type: "post",
                        url: "/admin/get-production-orders-of-date",
                        data: {
                            _token: '{{ csrf_token() }}',
                            date: date
                        },
                        success: function(response) {
                            if (response.status == 'success') {
                                $('#production_orders_body').html(response.html);
                                $('#production_orders_modal').modal('show');
                            }
                        }
                    });


                },
            });
            calendar.render();
        });

        $('#shuffle').click(function() {
            alertify.confirm('Shuffle Date',
                'Are You Sure You Want To Shuffle Date, Free Spots Will Be Filled From Future Dates',
                function() {
                    $('.loader-div').css('visibility', 'visible');
                    $.ajax({
                        type: "post",
                        url: '/admin/shuffle-production-date',
                        data: {
                            _token: '{{ csrf_token() }}',
                        },
                        success: function(response) {
                            if (response.status == 'success') {
                                Swal.fire({
                                    title: 'Success!',
                                    text: response.message,
                                    icon: 'success',
                                    confirmButtonText: 'Ok'
                                })
                                calendar.refetchEvents();
                            } else {
                                Swal.fire({
                                    title: 'Error!',
                                    text: response.message,
                                    icon: 'error',
                                    confirmButtonText: 'Ok'
                                })
                            }
                            setTimeout(() => {
                                $('.loader-div').css('visibility', 'hidden');
                            }, 1000);
                        }
                    });
                },
                function() {

                });

        });

        $('#production_orders_form').validate({
            submitHandler: function(form, e) {
                $('.loader-div').css('visibility', 'visible');
                e.preventDefault();
                var url = $(form).attr('action');
                var formData = new FormData(form);
                $.ajax({
                    url: url,
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status == 'success') {
                            Swal.fire({
                                title: 'Success!',
                                text: data.message,
                                icon: 'success',
                                confirmButtonText: 'Ok'
                            })
                            form.reset();
                            $('#production_orders_modal').modal('hide');
                            calendar.refetchEvents();
                        } else {
                            Swal.fire({
                                title: 'Error!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonText: 'Ok'
                            })
                        }

                    },
                    error: function(data) {
                        Swal.fire({
                            title: 'Error!',
                            text: data.message,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        })
                    },

                });
                setTimeout(() => {
                    $('.loader-div').css('visibility', 'hidden');
                }, 1000);
            }
        });
    </script>
@endsection