@extends('restaurant.pos.layout.master')
@section('title', 'Table 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">Shipping Method List</h4>

            <a href="{{ route('restaurant.pos.shipping-method.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="">Rate</label>
                    <input type="number" id="rate" name="rate" class="form-control form-control-sm" value="{{ request()?->rate }}"  />
                </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 rate = $('#rate').val();

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

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

        getData();
    </script>
@endsection