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

{{-- Page title --}}
@section('title', 'Service Request Lists')

{{-- 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
{{-- vendor 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/css/jquery.dataTables.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')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<style>
    /* .sorting{
        display: none;
    } */
</style>
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/data-tables.css')}}">
<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">
                <h5 class="col s8"><b>Service Requests</b></h5>
                <div class="input-field col s4">
                    <form action="{{ route('admin.service-requests.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">
                        {{ $service_requests->withQueryString()->links() }}
                    </div>
                    <table id="data-table-request" class="table responsive-table striped">
                        <thead class="grey lighten-2">
                            <tr>
                                <th id="order_id">#</th>
                                <th>Customer Name</th>
                                <th>ASC Name</th>
                                <th id="battery_type">Battery Type</th>
                                <th id="model">Model</th>
                                <th id="walk_in">Walk In</th>
                                <th id="status">Status</th>
                                <th id="created_at">Created</th>
                                <th id="view"></th>
                            </tr>
                        </thead>
                        <tbody id="append-data">
                            @forelse ($service_requests as $key => $service_request)
                            <tr>
                                <td class="order-no">{{ $key + $service_requests->firstItem() }}</td>
                                <td>
                                    @if ($service_request->customer && $service_request->customer->name)
                                        <a href="{{ route('admin.customer.show.tab', [$service_request->customer->id, 'active-order']) }}">{{ $service_request->customer->name }}</a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @if ($service_request->merchant && $service_request->merchant->name)
                                        <a href="{{ route('admin.merchant.show.tab', [$service_request->merchant->id, 'merchant-order']) }}">{{ $service_request->merchant->name }}</a>
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $service_request->category->name ?? '-'}}</td>
                                <td>{{ $service_request->product->model  ?? '-'}}</td>
                                <td width="5%">{{ $service_request->is_walk_in == 1 ? 'Yes' : 'No'}}</td>
                                <td width="20%">
                                    <span class="chip
                                    {{
                                        $service_request->status == 'pending' ?
                                        'orange' : (
                                        $service_request->status == 'fail' || $service_request->status == 'customer-cancel' ?
                                        'red' : (
                                        $service_request->status == 'confirmed' ?
                                        'purple' : (
                                        $service_request->status == 'switched-ASC-by-toyo' ?
                                        'pink': (
                                        $service_request->status == 'served-by-ASC' ?
                                        'green' : 'blue'))))
                                    }}
                                    lighten-4">
                                    <span class="{{
                                        $service_request->status == 'pending' ?
                                        'orange-text' : (
                                        $service_request->status == 'fail' || $service_request->status == 'customer-cancel' ?
                                        'red-text' : (
                                        $service_request->status == 'confirmed' ?
                                        'purple-text' : (
                                        $service_request->status == 'switched-ASC-by-toyo' ?
                                        'pink-text': (
                                        $service_request->status == 'served-by-ASC' ?
                                        'green-text' : 'blue-text'))))
                                        }}">
                                        {{ $service_request->status }}
                                    </span>
                            </span>
                        </td>
                        <td>{{ $service_request->created_time }}</td>
                        <td width="5%">
                            <div class="right">
                                <i class="material-icons left pt-4">
                                    <a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.service-requests.show', $service_request->id)}}" style="padding: 6px 10px;">remove_red_eye</a>
                                </i>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7">No Service Found!</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="center">
                {{ $service_requests->withQueryString()->links() }}
            </div>
            <input type="hidden" name="latest_date" id="latest_date" value="{{ $latest_date }}">
        </div>
        <!-- datatable ends -->
    </div>
    <div id="modal1" class="modal big-size-modal modal-fixed-header">
        <form action="{{ route('admin.service-requests.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>Service Request 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-filter-body modal-content-bg">
                <div class="row ml-0 mr-0 pl-2">
                    <div class="row">
                        <div class="col s2 date-filter custom-border-right">
                            <h6><b>Battery Type</b></h6>
                            @forelse ($battery_types as $category)
                                <div onclick="checkFilter({{ $category->id }}, 'category')" id="filter-box-category-{{ $category->id }}" class="filter-box mb-3 @if(request('category_ids') && in_array($category->id, request('category_ids'))) box-checked @endif">{{ $category->name }}</div>
                                <input type="checkbox" value="{{ $category->id }}" name="category_ids[]" id="filter-check-category-{{ $category->id }}" class="filter-check" @if(request('category_ids') && in_array($category->id, request('category_ids'))) checked="checked" @endif>
                            @empty
                            @endforelse
                        </div>
                        <div class="col s5 mb-3 custom-border-right">
                            <h6><b>Model</b></h6>
                            <div class="model-flex left-align">
                                @forelse ($models as $model)
                                    <div class="pl-1">
                                        <div onclick="checkFilter({{ $model->id }}, 'model')" id="filter-box-model-{{ $model->id }}" class="filter-box mb-3 @if(request('model_ids') && in_array($model->id, request('model_ids'))) box-checked @endif">{{ $model->model }}</div>
                                        <input type="checkbox" value="{{ $model->id }}" name="model_ids[]" id="filter-check-model-{{ $model->id }}" class="filter-check" @if(request('model_ids') && in_array($model->id, request('model_ids'))) checked="checked" @endif>
                                    </div>
                                @empty
                                @endforelse
                            </div>
                        </div>
                        <div class="col s2 mb-3 custom-border-right">
                            <h6><b>Status</b></h6>
                            <div>
                                <div onclick="checkFilter(1, 'status')" id="filter-box-status-1" class="filter-box mb-3 @if(request('status') && in_array('pending', request('status'))) box-checked @endif">Pending</div>
                                <input type="checkbox" value="pending" name="status[]" id="filter-check-status-1" class="filter-check" @if(request('status') && in_array('pending', request('status'))) checked="checked" @endif>
                            </div>
                            <div>
                                <div onclick="checkFilter(2, 'status')" id="filter-box-status-2" class="filter-box mb-3 @if(request('status') && in_array('fail', request('status'))) box-checked @endif">Rejected</div>
                                <input type="checkbox" value="fail" name="status[]" id="filter-check-status-2" class="filter-check" @if(request('status') && in_array('fail', request('status'))) checked="checked" @endif>
                            </div>
                            <div>
                                <div onclick="checkFilter(3, 'status')" id="filter-box-status-3" class="filter-box mb-3 @if(request('status') && in_array('customer-cancel', request('status'))) box-checked @endif">Customer-cancel</div>
                                <input type="checkbox" value="customer-cancel" name="status[]" id="filter-check-status-3" class="filter-check" @if(request('status') && in_array('customer-cancel', request('status'))) checked="checked" @endif>
                            </div>
                            <div>
                                <div onclick="checkFilter(4, 'status')" id="filter-box-status-4" class="filter-box mb-4 @if(request('status') && in_array('customer-approved', request('status'))) box-checked @endif">Approve</div>
                                <input type="checkbox"  value="customer-approved" name="status[]" id="filter-check-status-4" class="filter-check" @if(request('status') && in_array('customer-approved', request('status'))) checked="checked" @endif>
                            </div>
                        </div>
                            <div class="col s3 mb-3">
                                <h6><b>Created</b></h6>
                                <div class="filter-box custom-d-flex p-0 pl-2 pr-2">
                                    <input type="date" style="date" name="created_time" placeholder="Choose Date" class="date-filter mb-0" value="{{ request('created_time') ? request('created_time') : '' }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </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

@section('page-script')
<script src="{{asset('js/scripts/data-tables.js')}}"></script>
<script>
    $('#data-table-request').DataTable( {
        "paging":   false,
        "bFilter": false,
        // "info":     false
        "columnDefs": [
        {
            "orderable": false, "targets": 0
        },
        {
            "orderable": false, "targets": 3
        },
        {
            "orderable": false, "targets": 4
        },
        {
            "orderable": false, "targets": 5
        },
        {
            "orderable": false, "targets": 6
        },
        {
            "orderable": false, "targets": 7
        },
        {
            "orderable": false, "targets": 8
        },
        ],
        "order": [],
    });
    $('.toast-basic').on('click', function () {
        M.toast({
            html: 'Under Maintence!'
        })
    });

    $(document).ready(function() {
        setInterval(getLatestData, 10000);

        function getLatestData() {
            var latest_date = $('#latest_date').val();
            var key_di = $('#key').val();

            $.ajax({
                type:"GET",
                url:`{{ route('admin.service.latest.data') }}?date=${latest_date}`,
                success:function(res){
                    if(res){
                        $.each(res.data, function(key,value){
                            $('#latest_date').val(value.created_at);

                            row = $(`<tr class="red lighten-5"></tr>`)
                            col1 = $(`<td class="order-no">${value.id}</td>`)
                            col2 = $(`<td>${value.customer && value.customer.name ? value.customer.name : '-'}</td>`)
                            col3 = $(`<td>${value.merchant && value.merchant.name ? value.merchant.name : '-'}</td>`)
                            col4 = $(`<td>${value.category && value.category.name ? value.category.name : '-'}</td>`)
                            col5 = $(`<td>${value.product && value.product.model ? value.product.model : '-'}</td>`)
                            col6 = $(`<td>${value.is_walk_in ? 'Yes' : 'No'}</td>`)
                            col7 = $(`
                            <td width="20%">
                                    <span class="chip
                                        ${value.status == 'pending' ?
                                        'orange' : (
                                        value.status == 'fail' || value.status == 'customer-cancel' ?
                                        'red' : (
                                        value.status == 'confirmed' ?
                                        'purple' : (
                                        value.status == 'switched-ASC-by-toyo' ?
                                        'pink': (
                                        value.status == 'served-by-ASC' ?
                                        'green' : 'blue'))))}
                                    lighten-4">
                                    <span class="
                                        ${value.status == 'pending' ?
                                        'orange-text' : (
                                        value.status == 'fail' || value.status == 'customer-cancel' ?
                                        'red-text' : (
                                        value.status == 'confirmed' ?
                                        'purple-text' : (
                                        value.status == 'switched-ASC-by-toyo' ?
                                        'pink-text': (
                                        value.status == 'served-by-ASC' ?
                                        'green-text' : 'blue-text'))))}">
                                        ${ value.status }</span>
                                </span>
                        </td>
                            `)
                            col9 = $(`<td width="5%">
                                        <div class="right">
                                            <i class="material-icons left pt-4">
                                                <a class="blue lighten-4 border-radius-button z-depth-1" href=/admin/service-requests/${value.id}" style="padding: 6px 10px;">remove_red_eye</a>
                                            </i>
                                        </div>
                                    </td>`)
                            col8 = $(`<td>${ value.created_time }</td>`)

                            row.append(col1, col2, col3, col4, col5, col6, col7, col8, col9).prependTo("#append-data");
                        });

                        if(res.data.length > 0){
                            $('.order-no').each(function(key, item){
                                $(item).html(key+1);
                            });

                            $('table > tbody > tr').each(function(row, tr) {
                                if(row >= 10)
                                {
                                    $(tr).remove();

                                }
                            });
                        }
                    }
                }
            });
        }
    });
</script>
<script>
    $(document).ready(function(){
        $('.modal').modal();
    });
    function Close() {
        $('.modal').modal().hide();
    }
    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