@extends('index')
@section('title', Helper::getSiteTitle($title))

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box">
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('Settings') }}</a></li>
                    <li class="breadcrumb-item"><a href="javascript:void(0)">{{ __('Storefront') }}</a></li>
                    <li class="breadcrumb-item active">{{ __($title) }}</li>
                </ol>
            </div>
            <h4 class="page-title">{{ __($title) }}</h4>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="card-box">
            <form class="submit-form" action="{{ route('storefront-menus', [$menu->id, $menu_item_id]) }}" method="post">
                <div class="row">
                    <div class="col-lg-6">
                        {{ csrf_field() }}

                        <div class="form-group">
                            <a href="{{ route('storefront-menus', $menu->id) }}" class="btn btn-success waves-effect waves-light mb-2 float-right">
                                <span class="btn-label"><i class="fas fa-plus"></i></span>
                                {{ __('Create New Item') }}
                            </a>
                        </div>

                        <div class="display-messages">
                            @if($errors->any())
                            <div class="alert alert-danger" role="alert">
                                @foreach ($errors->all() as $error)
                                    {!! $error !!}<br>
                                @endforeach
                            </div>
                            @elseif(session('message'))
                            <div class="alert alert-success" role="alert">
                                {!! session('message') !!}
                            </div>
                            @endif
                        </div>

                        <div class="form-group">
                            <label for="projectname">{{ __('Label') }}</label>
                            <input type="text" id="projectname" class="form-control" placeholder="{{ __('Add Label') }}" name="label" value="{{ Helper::getInputValue('label', !empty($item) ? $item->label : '') }}" required="">
                        </div>

                        <div class="form-group">
                            <label for="projectname">{{ __('URL') }}</label>
                            <input type="text" id="projectname" class="form-control" placeholder="{{ __('URL') }}" name="url" value="{{ Helper::getInputValue('url', !empty($item) ? $item->url : '') }}" >
                        </div>

                        <div class="form-group">
                            <label for="projectname">{{ __('Parent Menu Item') }}</label>
                            <select class="form-control" name="parent_menu_item_id">
                                <option value="">Select Parent Menu Item</option>
                                @foreach($parent_menu_items as $parent_menu_item)
                                    <option value="{{ $parent_menu_item->id }}" {{ !empty($item) && !empty($item->parent_menu_item_id) && $parent_menu_item->id == $item->parent_menu_item_id ? 'selected' : '' }}>{{ $parent_menu_item->label }}</option>
                                @endforeach 
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="projectname">{{ __('Order Number (Lowest Comes First)') }}</label>
                            <input type="number" id="projectname" class="form-control" placeholder="{{ __('Order Number') }}" name="order_number" value="{{ Helper::getInputValue('order_number', !empty($item) ? $item->order_number : '') }}">
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-3 col-form-label">Open In New Tab?</label>
                            <div class="col-9">
                                @php $open_in_new_tab = Helper::getInputValue('open_in_new_tab', !empty($item) ? $item->open_in_new_tab : '') @endphp
                                <input type="checkbox" {{ !empty($open_in_new_tab) ? 'checked' : '' }} data-plugin="switchery" data-color="#1bb99a" name="open_in_new_tab" value="1" />
                            </div>
                        </div>

                        <div class="form-group row mb-3">
                            <label class="col-3 col-form-label">Categories?</label>
                            <div class="col-9">
                                @php $categories = Helper::getInputValue('categories', !empty($item) ? $item->categories : '') @endphp
                                <input type="checkbox" {{ !empty($categories) ? 'checked' : '' }} data-plugin="switchery" data-color="#1bb99a" name="categories" value="1" />
                            </div>
                        </div>

                        <button type="submit" class="btn btn-info waves-effect waves-light form-submit-button">
                            <span class="btn-label"><i class="mdi mdi-send"></i><span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></span>
                            {{ __('Submit') }}
                        </button>
                    </div>
                    <div class="col-lg-6">
                        {!! Helper::getDatatables([__('Label'), __('Action')]) !!}
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('css-lib')
<meta name="class-to-open" content="{{ Str::slug($menu->title) }}">
<meta name="remove-url" content="{{ route('storefront-remove-item', $menu->id) }}">
<link href="{{ asset('libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/datatables.net-select-bs4/css/select.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('libs/mohithg-switchery/switchery.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('js-lib')
<script src="{{ asset('libs/select2/js/select2.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-keytable/js/dataTables.keyTable.min.js') }}"></script>
<script src="{{ asset('libs/datatables.net-select/js/dataTables.select.min.js') }}"></script>
<script src="{{ asset('libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('libs/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ asset('libs/mohithg-switchery/switchery.min.js') }}"></script>
@endsection

@section('js')
<script type="text/javascript">
    function createTable()
    {
        table = $('.datatable').DataTable({
            language:{paginate:{previous:"<i class='mdi mdi-chevron-left'>",next:"<i class='mdi mdi-chevron-right'>"}},
            drawCallback:function(){$(".dataTables_paginate > .pagination").addClass("pagination-rounded")},
            "processing": true,
            "serverSide": true,
            "paging": true,
            "scrollX": false,
            "pageLength": 10,
            "language": {
                "emptyTable": "{{ __('No menu found') }}"
            },
            "order": [[0, "desc"]],
            "ajax":
            {
                url: "{{ route('storefront-menus', $menu->id) }}",
                data: function ( d ) {},
                beforeSend: function(jqXHR) {},
                error: function(jqXHR, textStatus, errorThrown){},
                complete: function(jqXHR) {}
            },
            createdRow: function( row, full, dataIndex ) {

                if (full.deleted_at) 
                {
                    $( row ).addClass('alert alert-dark');
                }
            },
            "columnDefs": [
                { className: "text-right", "targets": [ 1 ] },
            ],
            "columns":[
                { "data": "label", "name":"id" },
                { "data": "actions", "name":"id", "sortable": false },
            ] 
        });
    }
</script>
@endsection