@extends('back.layouts.main')
@if (request('site') == 'global')
    @section('title', 'أقسام الصفحة الرئيسية العامة')
@else
    @section('title', 'أقسام الصفحة الرئيسية')
@endif
@section('content')
    <!-- BEGIN: Content-->

    <div class="content-body">
        <!-- users list start -->
        <section class="app-user-list">
            <!-- list section start -->
            <div class="card">
                <div class="card-header">
                    <form action="" class='w-100'>
                        <div class="row ">
                            <div class="col-6">
                                <input type='hidden' name='site' value='{{ request('site') }}'>
                                <label for="">الامارة</label>
                                <select name="emirate_id" class="form-control">
                                    <option value="">Choose</option>
                                    @foreach ($emirates as $emirate)
                                        <option {{ selected($emirate->id, request('emirate_id')) }}
                                            value="{{ $emirate->id }}">{{ $emirate->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6">
                                <label for="">النوع</label>
                                <select name="type" class="form-control">
                                    <option value="">Choose</option>
                                    <option {{ selected('product', request('type')) }} value="product">منتجات</option>
                                    <option {{ selected('shop', request('type')) }} value="shop">محلات</option>
                                    <option {{ selected('category', request('type') ) }} value="category">اقسام</option>
                                    <option {{ selected('banner', request('type')) }} value="banner">مساحات اعلانية</option>
                                </select>
                            </div>
                            <div class="w-100"></div>
                            <div class="col-6">
                                <input type="submit" value='فلتر' class='btn btn-success mt-1'>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-datatable table-responsive pt-0">
                    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                        <table class="user-list-table table dataTable no-footer dtr-column">
                            <thead class="thead-light">
                                <tr role="row">
                                    <th style="width: 98px;">
                                        #ID
                                    </th>
                                    <th>الاسم </th>
                                    <th>النوع </th>
                                    @if (request('site') == 'global')
                                        <th>التطبيق</th>
                                    @endif
                                    <th>فعال</th>
                                    <th></th>
                                </tr>
                            </thead>
                                                        <tbody>
                                @if ($data->isNotEmpty())
                                    @foreach ($data as $row)
                                        <tr>
                                            <td>
                                                {{ $row->id }}
                                            </td>
                                            <td>{{ $row->name }}</td>
                                            <td>{{ $row->type }}</td>

                                            @if (request('site') == 'global')
                                                <td>{{ $row->selected_site }}</td>
                                            @endif

                                            <td>
                                                @if ($row->is_visible == '1')
                                                    <i data-feather='check-circle'></i>
                                                @else
                                                    <i data-feather='lock'></i>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ url('backend/home_sections/' . $row->id . '/edit') }}"
                                                    title='Edit'>
                                                    <i data-feather='edit-2'></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr class="odd">
                                        <td valign="top" colspan="6" class="dataTables_empty">
                                            No data available in table
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer">
                        {{ $data->appends(request()->except('page'))->links() }}
                    </div>
                </div>

            </div>
            <!-- list section end -->
        </section>
        <!-- users list ends -->
        <div class="modal fade" id="sort" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form method="post" action='home_sections/sort'>
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        </div>
                        <div class="modal-body">
                            <ul class="sortable">
                                @foreach ($data as $row)
                                    {{ csrf_field() }} <li class="ui-state-default"><span
                                            class="ui-icon ui-icon-arrowthick-2-n-s"></span>
                                        {{ $row->name }} <input type='hidden' name='id[]'
                                            value='{{ $row->id }}'>
                                    </li>
                                @endforeach
                            </ul>
                            <style>
                                .sortable {
                                    padding: 0;
                                }

                                .sortable li {
                                    list-style: none;
                                    cursor: pointer;
                                }
                            </style>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" name='sort' class="btn btn-primary">Sort</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    @push('footer')
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

        <script src="{{ url('') }}/admin/app-assets/js/scripts/pages/app-user-list.js"></script>
    @endpush

@stop
@section('breadcrumbs')

    <li class="breadcrumb-item active">أقسام الصفحة الرئيسية </li>
@stop

@section('create-btn')
    <a href="{{ url('backend/home_sections/create?site=' . request('site')) }}" class="btn add-new btn-primary float-right"
        type="button"><span>
            <i data-feather="plus-circle" class='mr-1'></i>انشاء</span></a>

    <a data-toggle="modal" data-target="#sort" class='btn btn-info active float-right'>
        <i class='fas fa-sort-amount-up-alt'></i> رتب الأقسام </a>
@stop