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

{{-- Page title --}}
@section('title', 'ASC Merchants')

{{-- vendors styles --}}
@section('vendor-style')
<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')}}">
@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 s4">
                    <h5><b>Asc Merchant</b></h5>
                </div>
                <div class="input-field col s5">
                    <form action="{{ route('admin.asc-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 border-radius-button right"><i class="material-icons left">list</i>Add Merchant</a>
                </div>
            </div>
            <div class="card-content pt-0">
                <!-- datatable start -->
                <div class="responsive-table">
                    <div class="center">
                        {{ $merchants->withQueryString()->links() }}
                    </div>
                    <table id="users-list-datatable" class="table table-responsive striped">
                        <thead class="grey lighten-2">
                            <tr>
                                <th>#</th>
                                <th>Asc Name</th>
                                <th>Asc Image</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 (count($merchant->images) > 0)
                                    <img class="circle" src="{{ url(!empty($merchant->images[0]) && $merchant->images[0]->full_image ? $merchant->images[0]->full_image : '' ) }}" alt="merchant image" width="50" height="50">
                                    @else
                                    <img class="circle" src="{{ asset('images/profile.png') }}" alt="merchant image" width="50" height="50">
                                    @endif
                                </td>
                                <td>{{ $merchant->phone_number }}</td>
                                <td>{{ $merchant->grade }}</td>
                                <td>{{ $merchant->address->city->name ?? '-'}}</td>
                                <td>{{ $merchant->address->township->name ?? '-'}}</td>
                                <td>
                                    <div class="custom-d-flex right">
                                        @if ($merchant->is_asc == 1)
                                        <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>
                                        @endif
                                        <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 Asc 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.asc-merchants.index') }}" method="get">
                <div class="modal-filter-header modal-header pt-1">
                    <div class="col s8 custom-d-flex">
                        <h5 class="m-0 pr-2 custom-border-right"><b>Merchant Filter</b></h5>
                        <a href="#" class="mt-1 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">submit</button>
                    </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

@section('page-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('');
    });
</script>
@endsection