@extends('cms.layouts.app')
@section('pre-styles')
    <x-cms.css-helper :dataTable="true" />
@endsection

@section('contents')
    <!-- Hero -->

    <x-cms.bread-crumb title="<i class='fa fa-plus'></i> Add Menu Position">

        <li class="breadcrumb-item">Cms</li>
        <li class="breadcrumb-item" aria-current="page">
            Menu Position
        </li>
    </x-cms.bread-crumb>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        <div class="row" id="singlePage">
            <div class="col-sm-8">

                <data-table index-route="{{ route('menu-positions.index') }}">

                    <template v-slot:header>
                        <th>Name</th>
                        <th class="d-none d-sm-table-cell" style="width: 20%;">URL</th>
                        <th class="d-none d-sm-table-cell" style="width: 5%;">Menus</th>
                        <th class="d-none d-sm-table-cell" style="width: 15%;">Description</th>
                        <th style="width: 15%;">Status</th>
                        <th class="text-center" style="width: 100px;">Actions</th>
                    </template>

                    <template v-slot:body>
                        <tr v-for="(record, index) in records">
                            <td>@{{ record.name }}</td>
                            <td class="font-w600 font-size-sm">@{{ record.alias }}</td>
                            <td class="font-w600 font-size-sm text-center">@{{ record.menus ? Object.keys(record.menus).length : 0 }}</td>
                            <td class="font-w600 font-size-sm">@{{ record.description }}</td>
                            <td class="text-center">
                                <button class="btn btn-link btn-xs js-tooltip-enabled"
                                    @click="changeStatus({index, record})" data-toggle="tooltip" title="Change Status">
                                    <span v-If="record.is_active" class="badge badge-info">Yes</span>
                                    <span v-else class="badge badge-danger">No</span>
                                </button>
                            </td>

                            <td class="text-center">

                                <div class="btn-group">
                                    <button type="button" class="btn btn-xs btn-default" data-toggle="tooltip"
                                        title="Edit" @click="editRecord({index, record})"><i
                                            class="fa fa-edit push-5-r text-success"></i></button>

                                    <button v-if="record.menus ? Object.keys(record.menus).length : 0"
                                        class="btn btn-xs btn-default" type="button" disabled><i
                                            class="fa fa-trash push-5-r text-danger"></i></button>
                                    <button v-else class="btn btn-xs btn-default" type="button" data-toggle="tooltip"
                                        title="Remove" @click="deleteRecord({index, record})"><i
                                            class="fa fa-trash push-5-r text-danger"></i></button>
                                </div>
                            </td>

                        </tr>
                    </template>
                    {{-- don't remove this --}}
                    @{{ editModel }}
                </data-table>
            </div>

            <div class="col-sm-4">
                <crud-form :model="model">
                    <template v-slot:fields>
                        @csrf
                        <div class="form-group">
                            <label for="name">Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" v-model="model.name"
                                required placeholder="Name...">
                        </div>

                        <div class="form-group">
                            <label for="alias">Display Name</label>
                            <input type="text" class="form-control" id="alias" name="alias" v-model="model.alias"
                                placeholder="Display Name...">
                        </div>

                        <div class="form-group">
                            <label for="code">Code</label>
                            <input type="text" class="form-control" id="code" name="code" v-model="model.code"
                                placeholder="Code..">
                        </div>

                        <div class="form-group">
                            <label for="diescription">Description</label>
                            <textarea class="form-control" id="diescription" name="diescription" rows="3" v-model="model.description"
                                placeholder="Description..."></textarea>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="isActive" name="is_active"
                                v-model="model.is_active">
                            <label class="form-check-label" for="isActive">Active</label>
                        </div>
                    </template>
                </crud-form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <x-cms.js-helper :dataTable="true" :select2="true" />
    <script src="{{ asset('js/admin/cms/single-page.js') }}"></script>
@endsection