@extends('admin.layouts.default')

@section('header_styles')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('admin_assets/plugins/datatables-bs4/css/dataTables.bootstrap4.css') }}">
<!-- SweetAlert2 -->
<link rel="stylesheet" href="{{ asset('admin_assets/plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
<!-- Toastr -->
<link rel="stylesheet" href="{{ asset('admin_assets/plugins/toastr/toastr.min.css') }}">
<style>
    .project-actions a {
        float: left;
        margin-left: 5px;
    }
    
    .hide{
        display: none;
    }

    @media screen and (max-width: 786px) {
        .dropdown{
            display: block;
        }
        .webMenu{
            display: none;
        }
        
        .mobileResp{
            flex: 100%;
            max-width: 100% !important;
            
        }
        
        .mobileRespBtn{
            flex: 100% !important;
            max-width: 100%;
        }
        .mobileRespBtn a{
            
            display: block;
            width: 100%;
        }
        .input-group-append{
            display: none;
        }
       
    }
</style>
@stop

@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">
                    @yield('title', 'Restaurants List')
                </h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">{{ Breadcrumbs::render('restaurants') }}</li>

                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">

                    @if(session()->has('message'))
                    <div class="alert alert-success">
                        {{ session()->get('message') }}
                    </div>
                    @endif
                    <div class="row">
                        <div class="col-6 mobileResp">
                            <form method="get" action="{{ URL::to('administrator/restaurants/search') }}">
                                <div class="input-group mb-3">
                                    <input type="search" class="form-control" name="filterby" id="filterby" placeholder="Search By fields" >
                                        
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-6 mobileRespBtn">
                            <a href="{{ URL::to('administrator/restaurants/admins/create') }}"
                               class="btn bg-gradient-success float-right"><i class="fas fa-plus-circle"></i> Add Restaurant</a>
                        </div>
                    </div>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0 table-responsive">
                    <table class="table table-striped" id="restaurants_owners">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>@sortablelink('Owner')</th>
                                <th>@sortablelink('Name')</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>@sortablelink('Post Code')</th>
                                <th>@sortablelink('Status')</th>
                                <th>Logo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $i=>$restaurant)
                            {{-- <tr data-toggle="collapse" href="#multiCollapseExample{{ $i+1 }}" aria-expanded="false"
                            aria-controls="multiCollapseExample{{ $i+1 }}"> --}}
                            <tr data-toggle="collapse" data-target="#multiCollapseExample{{ $i+1 }}" class="accordion-toggle">
                                <td>{{ $i+ $data->firstItem() }}</td>
                                <td>{{ $restaurant->first_name }}</td>
                                <td>{{ $restaurant->name }}</td>
                                <td>{{ $restaurant->userEmail }}</td>
                                <td>{{ $restaurant->phone }}</td>
                                <td>{{ $restaurant->postal_code }}</td>
                                <td>
                                    @if($restaurant->status == '1')
                                    {{ 'Active' }}
                                    @else
                                    {{ 'Inactive' }}
                                    @endif
                                </td>
                                <td>
                                    @if($restaurant->logo)
                                    <img height="60" src="{{ URL::to('uploads/files/'.$restaurant->logo) }}"
                                         alt="Logo picture">
                                    @else
                                    <img class="" height="60"
                                         src="{{ URL::to('admin_assets/images/default-image.png') }}" alt="Default Logo">
                                    @endif
                                </td>
                            </tr>

                            <tr class="hiddenRow" align="center">
                                <td colspan="7" class="">
                                    <div class="accordian-body collapse" id="multiCollapseExample{{ $i+1 }}">
                                        <a href="{{ URL::to('administrator/restaurants/view/'.encrypt($restaurant->users_id)) }}"
                                           class="btn btn-success">
                                            <i class="far fa-eye"></i> View
                                        </a>
                                        <a href="{{ URL::to('administrator/restaurants/admins/'. encrypt($restaurant->users_id). '/edit') }}"
                                           class="btn btn-info">
                                            <i class="far fa-edit" aria-hidden="true"></i> Edit
                                        </a>
                                        <a href="{{ URL::to('/owners/login') }}"
                                           class="btn btn-info">
                                            <i class="far fa-edit" aria-hidden="true" target="_blank"></i> Back office
                                        </a>
                                        @if($restaurant->website)
                                        <a href="{{ $restaurant->website }}"
                                           class="btn btn-info">
                                            <i class="far fa-eye" aria-hidden="true" target="_blank"></i> Website
                                        </a>
                                        @else
                                        <a href="#"
                                           class="btn btn-info">
                                            <i class="far fa-eye" aria-hidden="true" target="_blank"></i> Website
                                        </a>
                                        @endif
                                        <a href="{{ URL::to('administrator/restaurants/subrestaurants/add/'.encrypt($restaurant->restaurants_id)) }}"
                                           class="btn btn-primary">
                                            <i class="fas fa-plus-circle" aria-hidden="true"></i>
                                            New Branch
                                        </a>
                                    </div>
                                </td>

<!--                                <td>
                                    <div class="accordian-body collapse" id="multiCollapseExample{{ $i+1 }}">
                                    <div class="dropdown hide">
                                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            Menu
                                        </button>
                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                            <a href="{{ URL::to('administrator/restaurants/view/'.encrypt($restaurant->users_id)) }}"
                                           class="btn btn-success dropdown-item">
                                            <i class="far fa-eye"></i> View
                                        </a>
                                        <a href="{{ URL::to('administrator/restaurants/admins/'. encrypt($restaurant->users_id). '/edit') }}"
                                           class="btn btn-info dropdown-item">
                                            <i class="far fa-edit" aria-hidden="true"></i> Edit
                                        </a>
                                        <a href="{{ URL::to('/owners/login') }}"
                                           class="btn btn-info dropdown-item">
                                            <i class="far fa-edit" aria-hidden="true" target="_blank"></i> Back office
                                        </a>
                                        @if($restaurant->website)
                                        <a href="{{ $restaurant->website }}"
                                           class="btn btn-info dropdown-item">
                                            <i class="far fa-eye" aria-hidden="true" target="_blank"></i> Website
                                        </a>
                                        @else
                                        <a href="#"
                                           class="btn btn-info dropdown-item">
                                            <i class="far fa-eye" aria-hidden="true" target="_blank"></i> Website
                                        </a>
                                        @endif
                                        <a href="{{ URL::to('administrator/restaurants/subrestaurants/add/'.encrypt($restaurant->restaurants_id)) }}"
                                           class="btn btn-primary dropdown-item">
                                            <i class="fas fa-plus-circle" aria-hidden="true"></i>
                                            New Branch
                                        </a>
                                        </div>
                                    </div>
                                    </div>
                                </td>-->
                            </tr>

                            {{-- <tr width="100%" class="collapse multi-collapse" id="multiCollapseExample{{ $i+1 }}" style="list-style: none;">
                        <td colspan="8" class="project-actions">
                            <a href="{{ URL::to('administrator/restaurants/view/'.encrypt($restaurant->users_id)) }}"
                               class="btn btn-success">
                                View
                            </a>

                        </td>
                        </tr> --}}
                        @endforeach
                        </tbody>
                    </table>
                    {!! $data->appends(\Request::except('page'))->render() !!}
                    <div class="col-xs-6" style="float: left; margin-left: 10px;">
                        <form>
                            <select id="pagination" class="form-control">
                                <option value="10" @if($items == 10) {{ 'selected=selected' }} @endif>10</option>
                                <option value="20" @if($items == 20) {{ 'selected=selected' }} @endif>20</option>
                                <option value="50" @if($items == 50) {{ 'selected=selected' }} @endif>50</option>
                                <option value="100" @if($items == 100) {{ 'selected=selected' }} @endif>100</option>
                            </select>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- .modal -->
<div class="modal fade" id="modal-lg">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit Restaurant Admins</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    @stop

    @section('footer_scripts')

<!--    <script>
        $(document).ready(function () {
            $("#filterby").keyup(function () {
                search_table($(this).val());
            });

            function search_table(value) {
                $('#restaurants_owners tr').each(function () {
                    var found = 'false';
                    $(this).each(function () {
                        if ($(this).text().toLowerCase().indexOf(value.toLowerCase()) >= 0)
                        {
                            found = 'true';
                        }
                    });
                    if (found == 'true')
                    {
                        $(this).show();
                    } else
                    {
                        $(this).hide();
                    }
                });
            }
        });
    </script>-->
    <script>
        document.getElementById('pagination').onchange = function () {
            window.location = "{!! $data->url('1') !!}&items=" + this.value; 
        };
       
    </script>
    @stop