@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{route('admin.settings.index')}}">Settings</a></li>
                <li><a href="#">Areas & Tables</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>
    <div class="page-content">
        <div class="portlet">
            <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-9">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;"> Areas & Tables</h2>
                            <span class="subtitle"> </span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->

            <div class="row each_row">
                <div class="col-md-12">
                    <div class="col-md-4">
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-6">
                        <div id="role-lists" style="margin-bottom: 30px;">
                            <!--Backoffice permissions-->
                            <div class="row">
                                <div class="portlet-body">
                                    <div class="products box member">
                                        <div class="header_tbl">
                                            <div class="row">
                                                <div class="col-md-12 row_header">
                                                    <div class="col-md-12">
                                                        <div class="col-md-1 row_header"></div>
                                                        <div class="col-md-11 row_header">Areas</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row_wrap">
                                            <div class="row_inner_wrap dine-area-wrap">
                                                @foreach($dine_areas as $key => $value)
                                                <div class="row">
                                                    <div class="col-md-12 role-lists-show">
                                                        <div class="col-md-1 inner_row">
                                                            <div class="add_icon delete-dine-area" id="{{$key}}" data-url="{{route('admin.dine-areas.destroy', $key)}}">
                                                                <i class="fa fa-trash" aria-hidden="true" style="visibility: visible"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-11 inner_row">
                                                            <input type="text" name="dine_area_name" value="{{$value}}" class="form-control" readonly="">
                                                            <span class="update-dine-area hidden" id="{{$key}}"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                                <div class="row">
                                                    <div class="col-md-12 role-lists-show">
                                                        <div class="col-md-1 inner_row">
                                                            <div class="add_icon add-dine-area">
                                                                <i class="fa fa-plus" aria-hidden="true" style="visibility: visible"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-11 inner_row">
                                                            <input type="text" name="dine_area_name" value="" class="form-control" placeholder="Enter dine area name">
                                                            <span class="update-dine-area hidden"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>
                                                        </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="row each_row">
                <div class="col-md-12">
                    <div class="col-md-4">
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-6">
                        <div id="role-lists" style="margin-bottom: 30px;">
                            <!--Backoffice permissions-->
                            <div class="row">
                                <div class="portlet-body">
                                    <div class="products box member">
                                        <div class="header_tbl">
                                            <div class="row">
                                                <div class="col-md-12 row_header">
                                                    <div class="col-md-1"></div>
                                                    <div class="col-md-5">Tables</div>
                                                    <div class="col-md-4"></div>
                                                    <div class="col-md-2"></div>
                                                </div>

                                            </div>
                                        </div>
                                        <div class="row_wrap">
                                            <div class="row_inner_wrap dine-table-wrap">
                                                @foreach($dine_area_tables as $table_with_area)
                                                <div class="row">
                                                    <div class="col-md-12 role-lists-show">
                                                        <div class="col-md-1 inner_row">
                                                            <div class="add_icon delete-dine-table" id="{{$table_with_area->table_id}}" data-url="{{route('admin.dine-tables.destroy', $table_with_area->table_id)}}">
                                                                <i class="fa fa-trash" aria-hidden="true" style="visibility: visible"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-5 inner_row">
                                                            <select class="form-control select2 select-dine-area" disabled="true">
                                                                <option></option>
                                                                @foreach($dine_areas as $key => $value)
                                                                <option value="{{$key}}" {{($table_with_area->area_id == $key) ? 'selected' : ''}}>{{$value}}</option>
                                                                @endforeach
                                                            </select>
                                                            <!--<span class="update-dine-table"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>-->
                                                        </div>
                                                        <div class="col-md-4 inner_row">
                                                            <input type="text" class="form-control update-table" name="table_name" data-table-id="{{$table_with_area->table_id}}" data-name="table_name" readonly="true" value="{{$table_with_area->table_name}}" placeholder="Enter dine table name">
                                                            <span class="update-dine-table hidden"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>
                                                        </div>
                                                        <div class="col-md-2 inner_row">
                                                            <input type="number" name="table_capacity" value="{{$table_with_area->table_capacity}}" class="form-control update-table" data-table-id="{{$table_with_area->table_id}}" data-name="table_capacity" readonly="true" placeholder="Capacity" min="1" maxlength="2">
                                                            <span class="update-dine-table hidden"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                                <div class="row">
                                                    <div class="col-md-12 role-lists-show">
                                                        <div class="col-md-1 inner_row">
                                                            <div class="add_icon add-dine-table">
                                                                <i class="fa fa-plus" aria-hidden="true" style="visibility: visible"></i>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-5 inner_row">
                                                            <select class="form-control select2 select-dine-area" name="select_dine_area">
                                                                <option></option>
                                                                @foreach($dine_areas as $key => $value)
                                                                <option value="{{$key}}">{{$value}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4 inner_row">
                                                            <input type="text" class="form-control" name="table_name" value="" placeholder="Enter dine table name"><span class="update-dine-table hidden"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>
                                                        </div>
                                                        <div class="col-md-2 inner_row">
                                                            <input type="text" name="table_capacity" value="" class="form-control" placeholder="Capacity" onkeypress="return isNumber(event)" maxlength="2"><span class="update-dine-table hidden"><i class="fa fa-check" aria-hidden="true" style="visibility: visible"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null" >
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT END// -->
@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet"
      type="text/css" />
<link href="{{ asset('css/custom.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css"/>
<style>
    span.select2-selection__clear{
        display: none;
    }

    .add_icon, .edit_icon, .del_icon {
        background: #ECEDF1;
        position: absolute;
        top: 8px;
        right: 23.5%;
        padding: 5px 6px !important;
        border-radius: 3px;
        cursor: pointer;
        border: 1px solid #CED0D4;
        line-height: 0;
        margin-top: 0;
        float: left;
    }
    .update-dine-area{
        position: absolute;
        right: 12px;
        float: right;
        top: 9px;
    }
    .update-dine-area i{
        color:#49bd49;
    }
    .update-dine-table{
        position: absolute;
        right: 18px;
        float: right;
        top: 9px;
    }
    .update-dine-table i{
        color:#49bd49;
    }
    .row_header{
        border: none;
    }
</style>
@stop
@section('admin_js')
<script src="{{asset('js/general.js')}}"></script>
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
@include('admin.js.dine-table-with-area')
@stop