@extends('layouts.app')
@section('page-title', 'Service')


@section('body')
    <div class="col-6 card mx-auto">
        <div class="card-body">
            <div class="d-flex align-items-center justify-content-between">
                <h4>Service Prices</h4>
            </div>
            <div class="mt-4">
                <form id="ajax-form" method="PUT">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="">Service Provider</label>
                                <select name="service_provider_id" id="service-provider-id" class="form-control search">
                                    <option value=""></option>
                                    @foreach($service_providers as $service_provider)
                                        <option value="{{$service_provider->id}}">{{$service_provider->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="">Service Type</label>
                                <select name="service_type_id" id="service-type-id"
                                        class="form-control select-service" disabled>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $('.search').chosen();
        $(document).on('change', 'select[name=service_provider_id]', async function () {
            let serviceProviderId = $(this).val();
            let url = baseURL + '/admin/billing/couriers/' + serviceProviderId + '/courier-services';
            let response = await doAjaxPost(url, 'GET');
            $('select[name=service_type_id]').html('').attr('disabled', false);
            $('select[name=service_type_id]').append(`<option value=""></option>`);
            $.each(response.courier_services, function (k, v) {
                $('select[name=service_type_id]').append(`<option value="` + v.id + `">` + v.name + `</option>`);
            })
            var $mySelect = $('select[name=service_type_id]');
            $mySelect.chosen();
            $mySelect.trigger('chosen:open');
        });

        $(document).on('change', 'select[name=service_type_id]', function () {
            let url = baseURL + '/admin/billing/service-prices/list';
            let value = $(this).val();
            window.location.href = url + '/' + value;
        });
    </script>
@endpush