@extends('layouts.super-admin-layout')
@section('content')
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <!--breadcrumb-->
            <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
                <div class="breadcrumb-title pe-3">Package Menus</div>
                <div class="ps-3">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0 p-0">
                            <li class="breadcrumb-item"><a href="{{ route('super-admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Edit Form</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <!--end breadcrumb-->
            <div class="row">
                <div class="col-xl-12 mx-auto">
                    <div class="card border-top border-0 border-4 border-primary">
                        <div class="card-body p-5">
                            <div class="card-title d-flex align-items-center">
                                <div><i class="bx bxs-plus-square me-1 font-22 text-primary"></i>
                                </div>
                                <h5 class="mb-0 text-primary">Edit Package Menu</h5>
                                <div class="ms-auto"><a href="{{ route('super-admin.package-menus',['shop_id'=>$shop_id]) }}" class="btn btn-primary btn-sm  mt-2 mt-lg-0"><i class="bx bxs-notepad"></i>Package Menus</a></div>
                            </div>
                            <hr>
                            <form action="{{ route('super-admin.package-menus.edit.submit',['id'=>$package_menus->id, 'shop_id' => $shop_id]) }}" method="post" enctype="multipart/form-data">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6 mb-4">
                                        <label for="inputFirstName" class="form-label">Select Package Menus Category <span class="required">*</span></label>
                                        <select name="package_menus_category_id" class="single-select">
                                            <option value="{{ $package_menus->category_id }}">{{ $package_menus->category?$package_menus->category->name:"Select Package Menus Category" }}</option>
                                            @foreach($package_menus_category as $key)
                                                <option value="{{ $key->id }}">{{ $key->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('package_menus_category_id')
                                        <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-12 mb-4">
                                        <label for="inputFirstName" class="form-label">Title <span class="required">*</span></label>
                                        <input type="text" name="title" class="form-control" value="{{$package_menus->title}}" id="inputFirstName">
                                        @error('title')
                                        <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-4">
                                        <label for="inputFirstName" class="form-label" style="width: 100%">Current Image <span class="required">*</span></label>
                                       <img src="{{ asset($package_menus->image) }}" style="width: 50%">
                                    </div>
                                    <div class="col-md-12 mb-4">
                                        <label for="inputFirstName" class="form-label">Image <span class="required">*</span></label>
                                        <input type="file" name="image" class="form-control" id="inputFirstName">
                                        @error('image')
                                        <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-4">
                                        <label for="inputFirstName" class="form-label">Discount Percent <span class="required">*</span></label>
                                        <input type="number" step="any" name="discount_percent" value="{{ $package_menus->discount_percent }}" min="0" value="0" class="form-control" id="inputFirstName">
                                        @error('discount_percent')
                                        <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                        @enderror
                                    </div>
                                    <div class="col-md-12 mb-4">
                                        <label for="inputFirstName" class="form-label">Price <span class="required">*</span></label>
                                        <input type="number" step="any" name="price" value="{{ $package_menus->price }}" class="form-control" id="inputFirstName">
                                        @error('price')
                                        <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                        @enderror
                                    </div>
                                    @if ($package_menus->menu_item_id_list)
                                        @foreach ($package_menus->menu_item_id_list as $key)      
                                            @if($key)                                  
                                                <div class="row">
                                                    <div class="col-md-4 mb-4">
                                                        <label for="inputFirstName" class="form-label">Menu </label>
                                                        <input type="text" step="any" name="menu_name[]" value="{{ $key }}" class="form-control" id="inputFirstName">
                                                        @error('menu_name')
                                                        <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                                        @enderror
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endif
                               
                                    <div class="col-md-12 mb-4">
                                        <label for="inputFirstName" class="form-label">Add Menus </label>
                                        <div class="field_wrapper">
                                            <div>
                                                <input type="text" name="menu_name[]" class="form-control" placeholder="Enter Menu Name" style="width: 90%; float: left"/>
                                                <a href="javascript:void(0);" class="btn btn-primary add_button" title="Add field" style="width: 8%; float: left; margin-left: 5px"/><i class="bx bx-plus"></i></a>
                                            </div>
                                        </div>
                                        <div class="row">

                                            @error('menu_name.0')
                                            <div class="invalid-feedback" style="display: block"> {{ $message }} </div>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary btn-sm px-5">Update</button>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--end page wrapper -->


    <script type="text/javascript">
        $(document).ready(function(){
            var maxField = 100; //Input fields increment limitation
            var addButton = $('.add_button'); //Add button selector
            var wrapper = $('.field_wrapper'); //Input field wrapper
            var fieldHTML = '<div><input type="text" name="menu_name[]" class="form-control"  placeholder="Enter Menu Name"  style="width: 90%; float: left; margin-top: 10px"/><a href="javascript:void(0);" class="btn btn-danger remove_button" style="width: 8%; float: left;  margin-top: 10px; margin-left: 5px"><i class="bx bx-minus"></i></a></div>'; //New input field html
            var x = 1; //Initial field counter is 1

            //Once add button is clicked
            $(addButton).click(function(){
                //Check maximum number of input fields
                if(x < maxField){
                    x++; //Increment field counter
                    $(wrapper).append(fieldHTML); //Add field html
                }
            });

            //Once remove button is clicked
            $(wrapper).on('click', '.remove_button', function(e){
                e.preventDefault();
                $(this).parent('div').remove(); //Remove field html
                x--; //Decrement field counter
            });
        });
    </script>
@endsection