@layout('admin/master')
@section('content')
@section('scripts')
{{--  <script src="/admin/assets/js/tree-view.js"></script>  --}}
<script>
    var charges_types = JSON.parse('{{{ JSON.stringify(getChargesType) }}}');
</script>
@endsection
  <section class="main-content">
    <div class="row">
        <div class="col-sm-12">
            @include('admin/flash-message')
            <div class="card">
                <div class="card-header card-default">
                    Add Category
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.category.store') }}" method="post" enctype="multipart/form-data">
                        {{ csrfField() }}
                        <div class="form-group">
                            <label>Category</label>
                            <input type="text" id="category" name="category" placeholder="Type to filter" autocomplete="off" />
                            <input type="hidden" id="app_url" name="app_url" value={{APP_URL}}>
                            <input type="hidden" id="parent_id" name="parent_id" value="0">
                        </div>
                        <div class="form-group">
                            <label>Charge Type</label>
                            <select required id="charges_type" name="charges_type" class="form-control">
                                @each((ChargesType, index) in getChargesType)
                                    <option value="{{ ChargesType.id }}">{{ ChargesType.title }}</option>
                                @end
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Title</label>
                            <textarea required class="form-control" name="title" id="" cols="30" rows="10"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea required class="form-control" name="description" id="" cols="30" rows="10"></textarea>
                        </div>
                        <div class="form-group">
                            <label>Distance Charges</label>
                            <input required class="form-control distance_charges" name="distance_charges_usd">
                        </div>
                        <div class="form-group">
                            <label>Amount</label>
                            <input required class="form-control amount" name="amount_per_hour_usd">
                        </div>
                        <!--  <div class="form-group">
                            <label>Additional passengers charges</label>
                            <input required min="0" step="0.5" onkeypress="return event.charCode >= 48" type="number" step=".5" class="form-control" name="additional_passenger_charges_usd" id="" cols="30" rows="10">
                        </div>  -->
                        <div class="form-group">
                            <label>Image</label>
                            <input required class="form-control" type="file" name="image_url" id="" cols="30" rows="10">
                        </div>
                        <div class="form-group">
                            <label>Fields</label>
                            <div class="form-inline">
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="event_type" {{ record?.is_field?.event_type == 1 ? 'checked' : '' }} name="fields[]" value="event_type">
                                    <label for="event_type">
                                        Event Type
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="no_of_people" {{ record?.is_field?.no_of_people == 1 ? 'checked' : '' }} name="fields[]" value="no_of_people">
                                    <label for="no_of_people">
                                        No of People
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="estimated_minutes" {{ record?.is_field?.estimated_minutes == 1 ? 'checked' : '' }} name="fields[]" value="estimated_minutes">
                                    <label for="estimated_minutes">
                                        Estimated Minutes
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="estimated_distance" {{ record?.is_field?.estimated_distance == 1 ? 'checked' : '' }} name="fields[]" value="estimated_distance">
                                    <label for="estimated_distance">
                                        Estimated Distance
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="address" {{ record?.is_field?.address == 1 ? 'checked' : '' }} name="fields[]" value="address">
                                    <label for="address">
                                        Address
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="total_amount" {{ record?.is_field?.total_amount == 1 ? 'checked' : '' }} name="fields[]" value="total_amount">
                                    <label for="total_amount">
                                        Total Amount
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="additional_information" {{ record?.is_field?.additional_information == 1 ? 'checked' : '' }} name="fields[]" value="additional_information">
                                    <label for="additional_information">
                                        Additional Information
                                    </label>
                                </div>
                                <div class="checkbox checkbox-inline checkbox-success">
                                    <input type="checkbox" id="addons" {{ record?.is_field?.addons == 1 ? 'checked' : '' }} name="fields[]" value="addons">
                                    <label for="addons">
                                        Addons
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-header card-default">
                                Service Addon
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Service Title</label>
                                    <input class="form-control" name="service_title[]" id="service_title" type="text">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Charge Type</label>
                                    <select required id="service_charges_type" name="service_charges_type[]" class="form-control">
                                        @each((ChargesType, index) in getChargesType)
                                            <option value="{{ ChargesType.id }}">{{ ChargesType.title }}</option>
                                        @endeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Rate</label>
                                    <input class="form-control" name="service_rate[]" id="service_descp" type="text">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <button id="rowAdder" type="button" class="btn btn-dark">
                                        <span class="bi bi-plus-square-dotted">
                                        </span> ADD
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="addservices"></div>
                        <div class="form-group">
                            <div class="buttons">
                                <button class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('admin.footer')
  </section>
  <script>
   let constCenterData = [
        {
            id: 0,
            title: "Horse",
        },
        {
            id: 1,
            title: "Birds",
            isSelectable: false,
            subs: [
            {
                id: 10,
                title: "Pigeon",
                isSelectable: false,
            },
            {
                id: 11,
                title: "Parrot",
            },
            {
                id: 12,
                title: "Owl",
            },
            {
                id: 13,
                title: "Falcon",
            },
            ],
        },
        ];

    $('#category').change(function () {
        let a = document.getElementById('category')
        console.log("===========", )
    })
    let app_url = document.getElementById('app_url').value
    
    let request_url = `${app_url}/api/web/get-professions-tree-view?_method=GET`;

    function ajaxRequest(request_url, method, headers = {},cbSuccess) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, request_url, true);
        // Set headers
        for (var header in headers) {
        xhr.setRequestHeader(header, headers[header]);
        }
        xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            resolve(xhr.response);

            cbSuccess(xhr.response)
        } else {
            reject({
            status: xhr.status,
            statusText: xhr.statusText
            });

            
        }
        };
        xhr.onerror = function () {
        reject({
            status: xhr.status,
            statusText: xhr.statusText
        });
        };
        xhr.send();
    });
    }
    let data
    var headers = {
    'Content-Type': 'application/json',
    'token': 'wYt/VdryGgbFfQtLTViDG8t0FZwIPFnzjPMqGhZBkkandjb1u8q4BuL6mf0oZYnF'
    };
    // let combo_tree
     ajaxRequest(request_url, 'GET', headers,(response)=>{
             let comboTree3 = $('#category').comboTree({
            source : JSON.parse(response)['data'],
            isMultiple: false,
            cascadeSelect: true,
            collapse: false,
            selected: [$('#parent_id').val()]
        });

        comboTree3.onChange(function(){
        console.log('combo',comboTree3.getSelectedIds());
        $('#parent_id').prop("value",comboTree3.getSelectedIds());
        // val(comboTree3.getSelectedIds());
        });



     })

     $("#rowAdder").click(function () {
        let options = '';
        console.log('<--------charges_types-------->',charges_types);
        
        for( var i=0; i < charges_types.length; i++  ){
            options += ` <option value="${charges_types[i].id}">${charges_types[i].title}</option>`;
        }
        let html_content = `<div id="row" class="row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Service Title</label>
                                    <input class="form-control" name="service_title[]" id="service_title" type="text">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Charge Type</label>
                                    <select required="" id="service_charges_type" name="service_charges_type[]" class="form-control">
                                            ${options}
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label>Rate</label>
                                    <input class="form-control" name="service_rate[]" id="service_descp" type="text">
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <button class="btn btn-danger" id="DeleteRow" type="button"><i class="bi bi-trash"></i> Delete</button>
                                </div>
                            </div>
                        </div>`

		$('#addservices').append(html_content);
	});
    $("body").on("click", "#DeleteRow", function () {
			$(this).parents("#row").remove();
		})

        $(function() {
            $('.amount').mask('999.99');
        });    

        $(function() {
            $('.distance_charges').mask('999.99');
        });    
   </script>
@endsection