@extends(AdminBaseDashboard::AdminBaseLayout())
@section('title', trans('docket::docket.all customer service repair dockets'))

@section('content')
    <section id="ps-list-content">
        <div class="ps-list-content-wrapper">
            <div class="container-fluid breadcrumb-wraper">
                <ul class="breadcrumb">
                    <li><a href="{{ route('dashboard')}}" class="active bread-link">
                            <span class="me-1"><i class="fa-solid fa-house"></i></span>{{ __('docket::docket.home')}}</a></li>
                    <li><a href="{{ route('create-new-docket')}}" class="bread-link">{{ __('quote::quotation.create')}}</a></li>
                    <li>{{ __('docket::docket.all docket')}}</li>
                </ul>
            </div>
        </div>

        <div class="filter-container">
            <div class="container">
                <form class="filter-form">
                    <div class="row g-3">
                        <div class="col-sm-12 col-md-4 col-lg-4">
                            <div class="mb-3">
                                <label for="custom" class="form-label">{{ __('docket::docket.custom') }}</label>
                                <select name="period" id="period" class="form-select">
                                    <option value="">-- {{ __('docket::docket.Select') }} --</option>
                                    @if(count (filter()) > 0)
                                        @foreach(filter() as $filter)
                                            <option value="{{ $filter['value'] }}" @selected(($filter['value']) == $filter_type )>{{ __('docket::docket.'.$filter['title']) }}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-4">
                            <div class="mb-3">
                                <label for="from" class="form-label">{{ __('docket::docket.From') }}</label>
                                <input type="date" name="start_date" id="start_date" class="form-control"  value="{{ $start_from }}" disabled>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-4 col-lg-4">
                            <div class="mb-3">
                                <label for="to" class="form-label">{{ __('docket::docket.To') }}</label>
                                <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $stop }}" disabled>
                            </div>
                        </div>
                    </div>
                    <button class="btn" id="apply-filter-btn" type="btn" data-url="{{ route('filter-docket')}}">{{ __('docket::docket.Search') }}</button>
                </form>
            </div>
            <button class="btn close" id="close-filter-btn" type="button"><i class="fa-solid fa-times"></i></button>
        </div>
        <div class="header-btn-wrapper">
            <ul class="wrapper-menu">
                <li class="item">
                    <button class="btn filter-show-btn" id="filter-container-button">
                        <span class="me-1"><i class="fa-solid fa-filter"></i></span>
                        {{ __('docket::docket.Filter') }}
                    </button>
                </li>
                <li class="item">
                    <a class="btn" href="{{ route('list-docket') }}">
                        <span class="me-1"><i class="fa-solid fa-rotate-right"></i></span>
                        {{ __('docket::docket.reload') }}
                    </a>
                </li>
            </ul>
        </div>

        <div class="ps-list-wrapper">
            <div class="table-responsive-sm">
                <table id="list-table" class="table list-table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th scope="col">{{__('docket::docket.date')}}</th>
                              <th scope="col">{{__('docket::docket.srd number')}}</th>
                              <th scope="col">{{__('docket::docket.customer name')}}</th>
                              <th scope="col">{{__('docket::docket.customer po')}}</th>
                              <th scope="col">{{__('docket::docket.staff')}}</th>
                              <th scope="col">{{__('docket::docket.amount')}}</th>
                              <th scope="col">{{__('docket::docket.status')}}</th>
                              <th scope="col">{{__('docket::docket.action')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(count($srdocket)>0)
                        @foreach($srdocket as $docket)
                            <tr>
                                <td>{{ $docket->date}} </td>
                                <td>{{ $docket->docket_number}} </td>
                                <td>{{ $docket->docket_customer->customer_name}} </td>
                                <td>{{ $docket->docket_customer->mobile }} </td>
                                <td>{{ $docket->clerk->Name}} </td>
                                <td>{{ Docket::format_payment($docket->docket_payment->totalaftertax)}} </td>
                                <td> <span class="payment-status {{ Docket::status_type($docket->status)['color'] }}">{{ Docket::status_type($docket->status)['title'] }}</span> </td>
                                <td>
                                    <a href="{{ route('view-docket', ['id' => $docket->id, 'srd' => $docket->docket_number]) }}"
                                       class="btn"> <i class="fas fa-eye"></i></a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection

@section('javascript')
    <script>
        $(document).ready(function(){
            $(document).on('change', '#period', function(){
                var val = $(this).val();
                if(val == 'custom'){
                    $('#start_date').prop('disabled', false);
                    $('#end_date').prop('disabled', false);
                }else{
                    $('#start_date').prop('disabled', true);
                    $('#end_date').prop('disabled', true);
                }
            });
        });
    </script>
@endsection