@extends('restaurant.pos.layout.master')
@section('title','KITCHEN List')
@section('content')
<style> 

</style>  

<div class="card rounded-0">
    <div class="card-header d-flex justify-content-between align-items-center icon-triangle lt rounded-0">
        <h4 class="col-6 pl-0">Waiter List</h4>
        
        <a href="{{ route('restaurant.pos.waiter.create') }}" class="btn btn-sm btn-warning d-flex" type="button" name="button">
            <i class="bi bi-plus-lg me-1"></i>
            <div class="">Add New</div>
        </a>
    </div>

    <div class="card-body">
        <div class="row g-3 gy-2 mb-3">
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">Name</label>
                <input type="text" id="name" name="name" class="form-control form-control-sm" value="{{ request()?->name }}" />
            </div>
            <div class="col-xl-2 col-md-3 col-6">
                <label for="">Status</label>
                <select name="status" id="status" class="form-select form-select-sm select2">
                    <option value="">All</option>
                    <option value="1" {{ request()?->status == 1 ? 'selected' : '' }}>Active</option>
                    <option value="2" {{ request()?->status == 2 ? 'selected' : '' }}>Inactive</option>
                </select>
            </div>
            <div class="col">
                <label for="" class="d-block">&nbsp;</label>
                <button class="btn btn-sm btn-danger" onclick="getData()">
                    <i class="bi bi-search"></i>
                </button>
            </div>
        </div>

        <div id="tbl_data"></div>
    </div>
</div> 
@endsection

@section('custom_js')
    <script>
        const getData = () => {
            const name = $('#name').val();
            const status = $('#status').val();

            const obj = {
                name: name,
                status: status
            }

            ajaxCallV2("{{ route('restaurant.pos.waiter.index') }}", "GET", obj, (res) => {
                $('#loader').hide();
                $('#tbl_data').html(res.html);
            })
        }

        getData();
    </script>
@endsection