@extends('fronted.layout.main')
@section('adcontent')
<style>
    .menuadd li {
        float: left;
        list-style-type: none;
    }

    .multipleSelection {
        width: 189px;
    }

    .selectBox {
        position: relative;
    }

    .selectBox select {
        width: 72%;
    }

    .overSelect {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }

    #checkBoxes {
        background: black;
        position: absolute;
        display: none;
        border: 1px #8DF5E4 solid;
        width: 210px;
        color: #fff;
    }

    #checkBoxes label {
        color: #fff;
        /* display: block; */
    }

    #checkBoxes input {
        width: 11px !important;
        height: 11px;
    }

    .form-control-sm {
        width: 120px;
    }

    .addmenuscroll {
        overflow: scroll;
        height: 630px;
        overflow-x: hidden;
    }

    .addmenuitem {
        color: #000;
        font-weight: bold;
        padding: 10px;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        padding: 8px;
        border-bottom: 0;
    }

    .dataTables_wrapper .dataTables_filter input {
        border: 1px solid #aaa;
        border-radius: 3px;
        padding: 0px;
        background-color: transparent;
        margin-left: 3px;
    }

    .mealdatable table {
        margin-bottom: 0;
    }

    .dataTables_wrapper .dataTables_info {
        font-size: 12px;
        padding: 5px;
    }

    .dataTables_paginate {
        padding: 0;
        font-size: 12px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0;
    }

    .dataTable table tr {
        color: #000;
        font-size: 0.8rem;
    }

    .img-property {
        mix-blend-mode: multiply;
        width: 100px;
        height: 100px;
    }

    .item-img {
        width: 50px;
        height: 50px;
    }

    .menu-item-list-text {
        font-size: 0.8rem;
        margin-left: 15px;
    }

    .menu-item-box {
        width: 170px;
        height: 70px;
    }

    .menu-item-heading-text {
        font-size: 0.8rem;
    }

    hr.active {
        background-color: #ffc107;
        height: 6px;
        opacity: inherit;
        border: 0;
    }

    #menu-page {
        transition: all 1s;
    }

    .hidden-smooth {
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }

    .visible-smooth {
        display: block;
        opacity: 1;
        transition: opacity 3s ease-in-out;
    }

    .img-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .img-container img {
        max-width: 100%;
        max-height: 100%;
    }

    .cropper-view-box {
        border-radius: 50%;
    }
</style>

@if ($message = Session::get('additem'))
<script>
    Swal.fire({
        icon: 'success',
        text: 'Menu Item Added Successfully',
        allowOutsideClick: false
    }).then(() => {
        $('#additionalModal').modal('show');
    });
</script>
@endif
@if ($message = Session::get('additemdelete'))
<script>
    Swal.fire({
        icon: 'success',
        // title: 'Category Updated',
        text: '{{$message}}',
    })
</script>
@endif
@if(session()->has('menuImagesSave'))
<script>
    Swal.fire({
        icon: 'success',
        // title: 'Category Updated',
        text: '{{session("menuImagesSave")}}',
    })
</script>
@php session()->forget("menuImagesSave") @endphp
@endif
@if(session()->has('menuImagesError'))
<script>
    Swal.fire({
        icon: 'error',
        // title: 'Category Updated',
        text: '{{session("menuImagesError")}}',
    })
</script>
@php session()->forget("menuImagesError") @endphp
@endif
<div class="container-fluid me-0 ms-0" id="menu-page">
    <div class="row">
        <div id="menuSetupBox" class="col-3 m-0 p-0 menu-setup-box">
            <div class="container">
                <div class="d-flex justify-content-center align-items-center">
                    <button id="menuSetupShowBtn" class="btn btn-success btn-sm mb-1">Menu Setup</button>
                </div>
                <hr class="p-1 m-0 bg-success">
                <div class="row bg-light-subtle gap-4 menu-setup-imgDiv">
                    <div class="col-12 ">
                        <div class="card border-0 border-black bg-transparent p-0">
                            <div class="card-body">
                                <h5 class="card-title text-center text-uppercase">Add Item</h5>
                                <hr class="py-1 bg-black">
                                <div class="d-flex justify-content-center align-items-center">
                                    <img class="img-fluid  img-property" src="{{asset('assets/images/vegetables-in-the-basket-vector-21650380.jpg')}}" alt="add-item-img">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card border-0 border-black bg-transparent p-0">
                            <div class="card-body">
                                <h5 class="card-title text-center text-uppercase">Add Image</h5>
                                <hr class="py-1 bg-black">
                                <div class="d-flex justify-content-center align-items-center">
                                    <img class="img-fluid  img-property" src="{{asset('assets/images/img-uploade-icon.png')}}" alt="add-item-img">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card border-0 border-black bg-transparent p-0">
                            <div class="card-body">
                                <h5 class="card-title text-center text-uppercase">Timer</h5>
                                <hr class="py-1 bg-black">
                                <div class="d-flex justify-content-center align-items-center">
                                    <img class="img-fluid  img-property" src="{{asset('assets/images/timer-img-icon.jpg')}}" alt="add-item-img">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="menu-setup-list bg-light-subtle d-none">
                    <div class="menu-setup-btns d-flex justify-content-between align-items-center">
                        <div class="container add-item-btn-box">
                            <center>
                                <button type="button" class="btn text-uppercase mt-2 btn-sm add-item-btn">Add Item</button>
                            </center>
                            <hr class="p-1 m-0 w-100 active">
                        </div>
                        <div class="container add-image-btn-box">
                            <center>
                                <button type="button" class="btn text-uppercase mt-2 btn-sm add-img-btn">Add Image</button>
                            </center>
                            <hr class="p-1 m-0 w-100 bg-dark">
                        </div>
                        <div class="container add-timer-btn-box">
                            <center>
                                <button type="button" class="btn text-uppercase mt-2 btn-sm add-timer-btn ">Add Timer</button>
                            </center>
                            <hr class="p-1 m-0 w-100 bg-dark">
                        </div>
                    </div>
                    <div class="addItemSetup visible-smooth">
                        <div class="dataTable mt-3">
                            <form id="addMenuItesmForm" method="POST" action="{{route('addmenuitem')}}">
                                @csrf
                                <table class="table table-bordered display  text-center  roomSeatTable">
                                    <thead id="Expenses" class="align-middle  table-header">
                                        <th>Meal Type</th>
                                        <th>Item Code</th>
                                        <th>Item Name</th>
                                        <th>Action</th>
                                    </thead>
                                    <tbody class="align-middle">
                                        <tr>
                                            <td>
                                                <select id="demo" name="menucat[]" multiple>