@extends(AdminBaseDashboard::AdminBaseLayout())
@section('title', trans('order::order.all purchase order'))

@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>{{ __('order::order.home')}}</a>
                    </li>
                    <li><a href="{{ route('create-new-po')}}" class="bread-link">{{ __('order::order.create')}}</a></li>
                    <li>{{ __('order::order.all purchase order')}}</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">{{ __('order::order.custom') }}</label>
                                <select name="period" id="period" class="form-select">
                                    <option value="">-- {{ __('order::order.Select') }} --</option>
                                    @if(count (filter()) > 0)
                                        @foreach(filter() as $filter)
                                            <option value="{{ $filter['value'] }}" @selected(($filter['value']) == $filter_type )>{{ __('order::order.'.$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">{{ __('order::order.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">{{ __('order::order.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-order')}}">{{ __('order::order.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>
                        {{ __('order::order.Filter') }}
                    </button>
                </li>
                <li class="item">
                    <a class="btn" href="{{ route('list-po') }}">
                        <span class="me-1"><i class="fa-solid fa-rotate-right"></i></span>
                        {{ __('order::order.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">{{__('order::order.date')}}</th>
                        <th scope="col">{{__('order::order.order number')}}</th>
                        <th scope="col">{{__('order::order.supplier name')}}</th>
                        <th scope="col">{{__('order::order.receiver name')}}</th>
                        <th scope="col">{{__('order::order.staff')}}</th>
                        <th scope="col">{{__('order::order.amount')}}</th>
                        <th scope="col">{{__('order::order.status')}}</th>
                        <th scope="col">{{__('order::order.action')}}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(count($order)>0)
                        @foreach($order as $order)
                            <tr>
                                <td>{{ $order->date }}</td>
                                <td>{{ $order->purchase_order_number }}</td>
                                <td>{{ $order->order_supplier->supplier_name }}</td>
                                <td>{{ $order->order_supplier->receiver_name }}</td>
                                <td>{{ $order->clerk->Name }}</td>
                                <td>{{ PurchaseOrder::format_payment($order->order_payment->totalaftertax)}} </td>
                                <td> <span class="payment-status {{ PurchaseOrder::status_type($order->status)['color'] }}">{{ PurchaseOrder::status_type($order->status)['title'] }}</span> </td>
                                <td>
                                    <a href="{{ route('view-purchase-order', ['id' => $order->id, 'po' => $order->purchase_order_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