{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Merchant lists')

{{-- vendors styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/select.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/data-tables.css')}}">
@endsection

@section('content')
<!-- merchants list start -->
<section class="users-list-wrapper section">
    <div class="users-list-table">
        <div class="card">
            <div class="row pl-1 pr-1">
                <div class="col s3">
                    <h4 class="co"><b>Merchant</b></h4>
                </div>
                <div class="input-field col s6">
                    <form action="{{ route('admin.merchants.index') }}" method="get" id="report-search-form">
                        <input class="search-keyword" type="text" name="keyword" id="keyword" value="{{ request('keyword') ?? '' }}" placeholder="Search...">
                        <i class="material-icons prefix custom-search-icon">search</i>
                    </form>
                    <a class="modal-trigger" href="#modal1">
                        <i class="material-icons prefix custom-filter-icon">filter_list</i>
                    </a>
                </div>
                <div class="col s3 mt-2">
                    <a href="{{ route('admin.merchants.create') }}" class="btn  waves-effect waves-light #e03776 border-radius-button right"><i class="material-icons left">list</i>Add Merchant</a>
                </div>
            </div>
            {{-- <div class="row pl-1 pr-1">
                <div class="col s8"></div>
                <div class="input-field col s4">
                    <form action="{{ route('admin.merchants.index') }}" method="get" id="report-search-form">
            <input class="search-keyword" type="text" name="keyword" id="keyword" value="{{ request('keyword') ?? '' }}" placeholder="Search...">
            <i class="material-icons prefix custom-search-icon">search</i>
            </form>
            <a class="modal-trigger" href="#modal1">
                <i class="material-icons prefix custom-filter-icon">filter_list</i>
            </a>
        </div>
    </div> --}}
    <div class="card-content pt-0">
        <!-- datatable start -->
        <div class="responsive-table">
            <div class="center">
                {{ $merchants->withQueryString()->links() }}
            </div>
            <table id="data-table-reqeust" class="table responsive-table striped">
                <thead class="grey lighten-2">
                    <tr>
                        <th>#</th>
                        <th>Merchant Name</th>
                        <th>Merchant Photo</th>
                        <th>Is ASC</th>
                        <th>Phone Number</th>
                        <th>Grade</th>
                        <th>City</th>
                        <th>Township</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($merchants as $key => $merchant)
                    <tr>
                        <td>{{ $merchant->display_merchant_id < 10 ? '0'.$merchant->display_merchant_id : $merchant->display_merchant_id }}</td>
                        <td>{{ $merchant->name }}</td>
                        <td>
                            @if (isset($merchant->images[0]))
                            <img class="circle" src="{{$merchant->images[0]->full_image}}" alt="product image" width="75" height="75">
                            @else
                            <img class="circle" src="{{ asset('images/profile.png') }}" alt="product image" width="75" height="75">
                            @endif
                        </td>
                        <td>{{ $merchant->is_asc == 1 ? 'Yes' : 'No'}}</td>
                        <td>{{ $merchant->phone_number }}</td>
                        <td>{{ $merchant->grade }}</td>
                        <td>{{ $merchant->address && $merchant->address->city ? $merchant->address->city->name : '-' }}</td>
                        <td>{{ $merchant->address && $merchant->address->township ? $merchant->address->township->name : '-' }}</td>
                        <td>
                            <div class="custom-d-flex right">
                                <i class="material-icons left pt-4">
                                    <a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.asc-merchants.edit', $merchant->id) }}" style="padding: 6px 10px;">edit</a>
                                </i>
                                <i class="material-icons left pt-4">
                                    <a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.merchant.show.tab', [$merchant->id, 'merchant-order']) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                </i>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">No Merchants Found!</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="center">
                {{ $merchants->withQueryString()->links() }}
            </div>
        </div>
        <!-- datatable ends -->
    </div>
    </div>

    <div id="modal1" class="modal big-size-modal modal-fixed-header">
        <form action="{{ route('admin.merchants.index') }}" method="get">
            <div class="modal-filter-header modal-header pt-1">
                <div class="row">
                    <div class="col s8 custom-d-flex">
                        <h6 class="m-0 pr-2 custom-border-right"><b>Merchant Filter</b></h6>
                        <a href="#" class="pl-2 clear-filter" id="clearFilter">Clear Filter</a>
                    </div>
                    <div class="col s4">
                        <a href="javascript:void(0)" class="right modal-close">
                            <i class="material-icons prefix custom-close-icon">close</i>
                        </a>
                        <button class="right btn waves-effect waves-light red border-radius-10 mr-4" type="submit">Filter</button>
                    </div>
                </div>
            </div>
            <div class="modal-content  modal-content-bg">
                <div class="modal-filter-body row ml-0 mr-0 pl-2 pr-2 pt-2 pb-2">
                    <div class="col s3 mb-3 custom-border-right pr-2">
                        <h5 class="mb-5 mt-0"><b>City</b></h5>
                        @forelse ($cities as $city)
                        <div onclick="checkFilter({{ $city->id }}, 'city')" id="filter-box-city-{{ $city->id }}" class="filter-box mb-3 @if(request('city_ids') && in_array($city->id, request('city_ids'))) box-checked @endif">{{ $city->name }}</div>
                        <input type="checkbox" value="{{ $city->id }}" name="city_ids[]" id="filter-check-city-{{ $city->id }}" class="filter-check" @if(request('city_ids') && in_array($city->id, request('city_ids'))) checked="checked" @endif>
                        @empty

                        @endforelse
                    </div>
                    <div class="col s3 mb-3 custom-border-right">
                        <h5 class="mb-5 mt-0"><b>Grade</b></h5>
                        <div onclick="checkFilter(1, 'grade')" id="filter-box-grade-1" class="filter-box mb-3 @if(request('grades') && in_array(" A", request('grades'))) box-checked @endif">A</div>
                        <input type="checkbox" value="A" name="grades[]" id="filter-check-grade-1" class="filter-check" @if(request('grades') && in_array("A", request('grades'))) checked="checked" @endif>

                        <div onclick="checkFilter(2, 'grade')" id="filter-box-grade-2" class="filter-box mb-3 @if(request('grades') && in_array(" B", request('grades'))) box-checked @endif">B</div>
                        <input type="checkbox" value="B" name="grades[]" id="filter-check-grade-2" class="filter-check" @if(request('grades') && in_array("B", request('grades'))) checked="checked" @endif>

                        <div onclick="checkFilter(3, 'grade')" id="filter-box-grade-3" class="filter-box mb-3 @if(request('grades') && in_array(" C", request('grades'))) box-checked @endif">C</div>
                        <input type="checkbox" value="C" name="grades[]" id="filter-check-grade-3" class="filter-check" @if(request('grades') && in_array("C", request('grades'))) checked="checked" @endif>

                        <div onclick="checkFilter(4, 'grade')" id="filter-box-grade-4" class="filter-box mb-3 @if(request('grades') && in_array(" D", request('grades'))) box-checked @endif">D</div>
                        <input type="checkbox" value="D" name="grades[]" id="filter-check-grade-4" class="filter-check" @if(request('grades') && in_array("D", request('grades'))) checked="checked" @endif>
                    </div>
                </div>
            </div>
        </form>
    </div>
    </div>
</section>
<!-- merchants list ends -->
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('vendors/data-tables/js/dataTables.select.min.js')}}"></script>
@endsection

{{-- page script --}}
@section('page-script')
<script src="{{asset('js/scripts/data-tables.js')}}"></script>
<script>
    $(document).ready(function() {
        $('.modal').modal();
    });

    function checkFilter(id, type) {
        var filter_box = "#filter-box-" + type + '-' + id;
        var filter_check = "#filter-check-" + type + '-' + id;

        if ($(filter_box).hasClass("box-checked")) {
            $(filter_box).removeClass("box-checked");
            $(filter_check).removeAttr('checked');
        } else {
            $(filter_box).addClass("box-checked");
            $(filter_check).attr('checked', 'checked');
        }
    }

    $('#clearFilter').on('click', function() {
        $('.filter-box').removeClass('box-checked');
        $('.filter-check').removeAttr('checked');
        $('.date-filter').val('');
    });

    $('#data-table-reqeust').DataTable({
        "paging": false,
        "bFilter": false,
        // "info":     false
        "columnDefs": [{
                "orderable": false,
                "targets": 0
            },
            {
                "orderable": false,
                "targets": 2
            },
            {
                "orderable": false,
                "targets": 3
            },
            {
                "orderable": false,
                "targets": 4
            },
            {
                "orderable": false,
                "targets": 8
            },
        ],
        "order": [],
    });
</script>
@endsection