@extends('layouts.admin')

@section('title' , 'Areas List')

@section('breadcrumb-item')
    <li class="breadcrumb-item active">Areas List</li>
@endsection

@section('content')
    <div class="card">
        <div class="card-header bg-theme">
            <p class="h5 pt-2 mb-0 float-left"><i class="fa fa-list pr-1"></i>Areas List</p>
            <a href="{{route('admin.area.create')}}" data-toggle="tooltip" data-placement="bottom"
               title="Add New Record" class="btn btn-info float-right ml-2">
                <i class="fa fa-plus"></i>
            </a>
            <form action="{{route('admin.areas')}}" method="get" class="form-inline float-right">
                <div class="form-group">
                    <div class="input-group">
                        <input class="form-control" type="text" name="q" value="{{ request()->query('q') }}"
                               placeholder="Search in Areas">
                        <div class="input-group-append">
                            <button class="btn btn-success" type="submit"><i class="fa fa-search"></i></button>
                        </div>
                        <div class="input-group-append">
                            <a class="btn btn-danger{{ request()->query('q') ? '' : ' disabled' }}"
                               href="{{route('admin.areas')}}">
                                <i class="fa fa-eraser"></i></a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="row mt-4">
            <div class="col-md-12 text-center">
                <button type="button" class="btn btn-sm btn-success col-md-3 print-btn">
                    Print
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="print_content">
                <table class="table table-hover">
                    <thead>
                    <tr>
                       <th>#</th>
                       <th>Name</th>
                       <th>No. of Shops</th>
                       <th>City</th>
                       <th>Action</th>
                    </tr>
                    </thead>
                <tbody>
                @forelse($areas as $key => $area)
                    <tr>
                        <td>{{ $areas->firstItem() + $key }}</td>
                        <td>{{$area->name}}</td>
                        <td>{{$area->shops_count}}</td>
                        <td>{{$area->cityName}}</td>
                        <td>
                            <div class="btn-group">
                                <a href="{{ route('admin.area.show', ['id' => $area->id]) }}"
                                   data-toggle="tooltip" title="View"
                                   class="btn btn-sm btn-outline-primary"><i class="fa fa-eye"></i></a>
                                <a href="{{route('admin.area.edit', ['id' => $area->id, 'page' => request()->get('page', 1)])}}"
                                   data-toggle="tooltip" title="Edit"
                                   class="btn btn-sm btn-outline-success"><i class="fa fa-pencil"></i></a>
                                @include('includes.modals.delete', ['model' => 'area', 'route' => 'admin.area.delete'])
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <th colspan="7" class="text-center">No Areas Yet</th>
                    </tr>
                @endforelse
                </tbody>
            </table>
            </div>
        </div>
        <div class="pagination justify-content-center mb-4">
            {{ $areas->appends(['q' => request()->query('q')])->links() }}
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>

    <script>
        $(document).on('click', '.print-btn', function () {
            let printContents = document.querySelector('.print_content').innerHTML;
            let originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        });
    </script>
@endsection