@extends('layouts.admin.app')
@section('title', translate('Create new Order'))

@push('css_or_js')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('assets/admin/css/tags-input.min.css') }}" rel="stylesheet">
@endpush

@section('content')
    <div class="content container-fluid">
        <!-- Page Header -->
        <div class="d-flex flex-wrap gap-2 align-items-center mb-4">
            <h2 class="h1 mb-0 d-flex align-items-center gap-2">
                <img width="20" class="avatar-img" src="{{ asset('assets/admin/img/icons/product.png') }}" alt="">
                <span class="page-header-title">
                    {{ translate('Create_New_Order') }}
                </span>
            </h2>
        </div>
        <!-- End Page Header -->

        <div class="row g-3">
            <div class="col-12">
                <form action="javascript:" method="post" id="product_form" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-2">
                        <div class="col-lg-12">
                            <div class="row g-2">
                                <div class="col-12">
                                    <div class="card h-100">
                                        <div class="card-header">
                                            <h4 class="mb-0 d-flex gap-2 align-items-center">
                                                <i class="tio-user"></i>
                                                {{ translate('Customer Info') }}
                                            </h4>
                                            <button type="button" data-toggle="modal"
                                                data-target=".customer-address-example-modal-sm" class="btn btn-primary"><i
                                                    class="tio-search"></i> Search</button>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label class="input-label">{{ translate('Customer Name') }}
                                                        </label>
                                                        <input type="text" disabled name="customer_name"
                                                            id="customer_name" class="form-control"
                                                            placeholder="{{ translate('Customer Name') }}">

                                                        <input type="hidden" name="user_id" id="user_id">

                                                    </div>
                                                </div>

                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label class="input-label">{{ translate('Contact') }}
                                                        </label>
                                                        <input type="text" disabled id="customer_number"
                                                            name="customer_number" class="form-control"
                                                            placeholder="{{ translate('Ex : 33 123456') }}">
                                                    </div>
                                                </div>

                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label class="input-label" for="exampleFormControlSelect1">
                                                            {{ translate('Address') }}
                                                            <span class="text-danger">*</span>
                                                        </label>
                                                        <select name="customer_address" id="customer_addresses"
                                                            class="form-control"
                                                            {{-- onchange="getcustomerRequest('{{ url('/') }}/admin/orders/get-customer?customer_id='+this.value,'customer')" --}}
                                                            >
                                                            <option selected disabled>---{{ translate('select') }}---
                                                            </option>

                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <h4 class="mb-0 d-flex gap-2 align-items-center">
                                                    <i class="tio-category"></i>
                                                    {{ translate('Service Info') }}
                                                </h4>
                                            </div>
                                            <div class="card-body pb-0">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div id="add_new_option">
                                                        </div>
                                                        <br>
                                                        <div class="">
                                                            <a class="btn btn-outline-success"
                                                                id="add_new_option_button">{{ translate('add_New_Service') }}</a>
                                                        </div>
                                                        <br><br>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="card h-100">
                                            <div class="card-header">
                                                <h4 class="mb-0 d-flex gap-2 align-items-center">
                                                    <i class="tio-car"></i>
                                                    {{ translate('Driver Info') }}
                                                </h4>
                                            </div>
                                            <div class="card-body pb-0">
                                                <div class="row">
                                                    <div class="col-md-12">
                                                        <div class="col-sm-4">
                                                            <div class="form-group">
                                                                <label class="input-label" for="exampleFormControlSelect1">
                                                                    {{ translate('Assign Vehicle Manually') }}

                                                                </label>
                                                                <select name="vehicle_id"
                                                                    class="form-control js-select2-custom">
                                                                    <option selected disabled>
                                                                        ---{{ translate('select') }}---
                                                                    </option>
                                                                    @foreach ($all_vehicle as $vehicle)
                                                                        <option value="{{ $vehicle->id }}">
                                                                            {{ $vehicle->vehicle_number }}</option>
                                                                    @endforeach
                                                                </select>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-3 mt-4">
                            <button type="reset" class="btn btn-secondary">{{ translate('reset') }}</button>
                            <button type="submit" class="btn btn-primary">{{ translate('submit') }}</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Search Customer Modal --}}
    <div class="modal fade customer-address-example-modal-sm" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <h5 class="modal-title h4" id="mySmallModalLabel"> Search Customer
                    </h5>
                    <button type="button" class="btn btn-xs btn-icon btn-ghost-secondary" data-dismiss="modal"
                        aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>

                <form action="javascript:" method="post" id="customer_form" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <!-- Input Group -->
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="input-label">{{ translate('Contact') }}
                                    </label>
                                    <input type="number" name="customer_contact" class="form-control " id="customer-contact"
                                        placeholder="{{ translate('Ex : 33123456') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                {{-- <div class="form-group">
                                    <label class="input-label">{{ translate('Customer CPR') }}
                                    </label>
                                    <input type="text" name="customer_cpr" class="form-control"
                                        placeholder="{{ translate('Ex : 931234567') }}">
                                </div> --}}
                            </div>
                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Area</label>
                                    <input type="text" name="address" class="form-control " id="address" value=""
                                        placeholder="Area">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Bldg / House</label>
                                    <input type="text" name="house" class="form-control " id="house" value=""
                                        placeholder="Bldg / House">
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Flat</label>
                                    <input type="text" name="floor" class="form-control" id="floor" value=""
                                        placeholder="Flat">
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Road</label>
                                    <input type="text" name="road" class="form-control" id="road" value=""
                                        placeholder="Road">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Block</label>
                                    <input type="text" name="block" class="form-control" id="block" value=""
                                        placeholder="Block">
                                </div>
                            </div>
                            <div class="col-md-6 text-center">
                                <button type="submit" class="btn btn-primary"><i class="tio-search"></i>
                                    {{ translate('search') }}</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="customer-search-result"></div>

            </div>
        </div>
    </div>


     {{-- Add Customer Modal --}}
    <div class="modal fade add-customer-address-example-modal-sm" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">

                    <h5 class="modal-title h4" id="mySmallModalLabel"> Add Customer
                    </h5>
                    <button type="button" class="btn btn-xs btn-icon btn-ghost-secondary" data-dismiss="modal"
                        aria-label="Close">
                        <i class="tio-clear tio-lg"></i>
                    </button>
                </div>

                <form action="javascript:" method="post" id="add_customer_form" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <!-- Input Group -->
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="input-label">{{ translate('Contact') }}
                                    </label>
                                    <input type="number" name="customer_contact" class="form-control" id="new-customer-contact"
                                        placeholder="{{ translate('Ex : 33123456') }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="input-label">{{ translate('Customer Name') }}
                                    </label>
                                    <input type="text" name="customer_name" class="form-control"
                                        placeholder="">
                                </div>
                            </div>

                            <div class="col-md-6 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Area</label>
                                    <input type="text" name="address" class="form-control" required id="new-address" value=""
                                        placeholder="Area">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Bldg / House</label>
                                    <input type="text" name="house" class="form-control" required id="new-house" value=""
                                        placeholder="Bldg / House">
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Flat</label>
                                    <input type="text" name="floor" class="form-control " id="new-floor" value=""
                                        placeholder="Flat">
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Road</label>
                                    <input type="text" name="road" required class="form-control" id="new-road" value=""
                                        placeholder="Road">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label class="input-label">Block</label>
                                    <input type="text" name="block" class="form-control" id="new-block" value=""
                                        placeholder="Block">
                                </div>
                            </div>
                            <div class="col-md-6 text-center">
                                <button type="submit" class="btn btn-primary"><i class="tio-add"></i>
                                    {{ translate('Add') }}</button>
                            </div>
                        </div>
                    </div>
                </form>

                <div id="customer-search-result"></div>

            </div>
        </div>
    </div>
@endsection

@push('script')
@endpush

@push('script_2')
    <script src="{{ asset('assets/admin/js/spartan-multi-image-picker.js') }}"></script>


    <script>
        var count = 0;
        var SERVICE_TYPE_OPTION='';
        $(document).ready(function() {

            $("#add_new_option_button").click(function(e) {
                count++;
                var SERVICE_TYPE=`<div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label class="input-label" for="exampleFormControlSelect1">
                                                            {{ translate('Service Type') }}
                                                            <span class="text-danger">*</span>
                                                        </label>
                                                        <select name="category_type" id="category_type_` + count +
                    `" class="form-control js-select2-custom category-type-container"
                                                                onchange="getRequest('{{ url('/') }}/admin/orders/get-categories?service_type='+this.value,'category',` +
                    count + `)">
                                                            <option selected disabled>---{{ translate('select') }}---</option>
                                                                <option value="refill">Refill Gas</option>
                                                                <option value="maintenance">Maintenance Service</option>

                                                        </select>
                                                    </div>
                                                </div>`;

                var add_option_view = `
                    <div class="card view_new_option mb-2" >
                        <div class="card-header">
                            <label for="" id=new_option_name_` + count + `> {{ translate('add_new') }}</label>
                        </div>
                        <div class="card-body">
                            <div class="row g-2">`
                                console.log(count)
                                if(count==1){
                                    add_option_view +=SERVICE_TYPE;
                                }

                                add_option_view+=`

                            <div class="col-12 col-lg-6">
                                    <div class="row g-2">

                                        <div class="col-md-4">
                                            <label class="d-md-block d-none">&nbsp;</label>
                                        <div class="d-flex align-items-center justify-content-between">

                                        <div>
                                            <button type="button" class="btn btn-danger btn-sm delete_input_button" onclick="removeOption(this)"title="{{ translate('Delete') }}">
                                                <i class="tio-add-to-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="option_price_` + count + `" >
                        <div class="border rounded p-3 pb-0 mt-3">
                            <div  id="option_price_view_` + count + `">
                                <div class="row g-3 add_new_view_row_class mb-3">
                                    <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <label class="input-label" for="exampleFormControlSelect1">
                                                            {{ translate('Service') }}
                                                            <span class="text-danger">*</span>
                                                        </label>
                                                        <select name="service_id[]" id="category_` + count + `" class="form-control js-select2-custom category_service_container"
        onchange="getRequest('{{ url('/') }}/admin/orders/get-categories?service_id='+this.value+'&data_id='+$(this).find('option:eq(0)').data('id'),'services',` +count + `)">`
+SERVICE_TYPE_OPTION+
`</select>
                                                    </div>
                                                </div>

                                     <div class="col-md-4 col-sm-6">
                                        <label for="">{{ translate('quantity') }}</label>
                                        <input class="form-control" id="services_quantity_` + count + `" placeholder="Quantity"  type="number" min="0" step="0.01" name="quantity[]">
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <label for="">{{ translate('Service_price') }}</label>
                                        <input class="form-control" id="services_` + count + `" disabled type="number" placeholder="Price"  min="0" step="0.01" name="options[]" id="">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>`;

                $("#add_new_option").append(add_option_view);
            });
        });



        function new_option_name(value, data) {
            $("#new_option_name_" + data).empty();
            $("#new_option_name_" + data).text(value)
            console.log(value);
        }

        function removeOption(e) {
            element = $(e);
            element.parents('.view_new_option').remove();
        }

        function deleteRow(e) {
            element = $(e);
            element.parents('.add_new_view_row_class').remove();
        }
    </script>


    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#viewer').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#customFileEg1").change(function() {
            readURL(this);
            $('#image-viewer-section').show(1000)
        });
    </script>

    <script>
        $('#product_form').on('submit', function() {
            var forms = new FormData(this);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.post({
                url: '{{ route('admin.orders.store-order') }}',
                data: forms,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {

                    if (data.error) {
                        toastr.error(data.error, {
                            CloseButton: true,
                            ProgressBar: true
                        });

                    } else if (data.errors) {
                        for (var i = 0; i < data.errors.length; i++) {
                            toastr.error(data.errors[i].message, {
                                CloseButton: true,
                                ProgressBar: true
                            });
                        }
                    } else {
                        toastr.success('{{ translate('Order created successfully!') }}', {
                            CloseButton: true,
                            ProgressBar: true
                        });
                        setTimeout(function() {
                            location.href = '{{ route('admin.orders.list', ['all']) }}';
                        }, 2000);
                    }
                }
            });
        });
    </script>


    <script>
        $(document).on('click', '.select-addres-btn', function() {
            let addressId = $(this).data('address-id')
            let address = $(this).data('address')
            let customerName = $(this).data('customer-name')
            let customerPhone = $(this).data('customer-phone')
            let customerId = $(this).data('customer-id')
            document.getElementById('customer_name').value = customerName
            document.getElementById('customer_number').value = customerPhone

            document.getElementById('user_id').value = customerId
            addressOpt = '<option value="' + addressId + '" selected >' + address + '</option>';
            $('#customer_addresses').find('option').remove().end().append(addressOpt);
            $('.customer-address-example-modal-sm').modal('hide')
            $('#customer-search-result').html('')
            $('#customer_form').trigger("reset");
        })
        $('#customer_form').on('submit', function() {
            $('#customer-search-result').html('')
            var forms = new FormData(this);

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.post({
                url: '{{ route('admin.orders.search-customer') }}',
                data: forms,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    if (data.error) {
                        toastr.error(data.error, {
                            CloseButton: true,
                            ProgressBar: true
                        });

                    } else {
                        $('#customer-search-result').html(data.html)

                    }
                }
            });
        });
    </script>


<script>
    $(document).on('click', '.add-customer-btn', function() {
  // Get values from modal form (.customer-address-example-modal-sm)
  const addressId = $('.customer-address-example-modal-sm #customer-contact').val() || '';
  const house = $('.customer-address-example-modal-sm #house').val() || '';
  const road = $('.customer-address-example-modal-sm #road').val() || '';
  const block = $('.customer-address-example-modal-sm #block').val() || '';
  const area = $('.customer-address-example-modal-sm #area').val() || '';

  // Assign values to target form (.add-customer-address-example-modal-sm)
  $('.add-customer-address-example-modal-sm #new-customer-contact').val(addressId);
  $('.add-customer-address-example-modal-sm #new-house').val(house);
  $('.add-customer-address-example-modal-sm #new-road').val(road);
  $('.add-customer-address-example-modal-sm #new-block').val(block);
  $('.add-customer-address-example-modal-sm #new-area').val(area);

  // Hide first modal and show second modal (assuming Bootstrap modals)
  $('.customer-address-example-modal-sm').modal('hide');
  $('.add-customer-address-example-modal-sm').modal('show');
});


    $('#add_customer_form').on('submit', function() {
        var forms = new FormData(this);

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.post({
            url: '{{ route('admin.customer.add-new-user') }}',
            data: forms,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                if (data.error) {
                        toastr.error(data.error, {
                            CloseButton: true,
                            ProgressBar: true
                        });

                    } else if (data.errors) {
                        for (var i = 0; i < data.errors.length; i++) {
                            toastr.error(data.errors[i].message, {
                                CloseButton: true,
                                ProgressBar: true
                            });
                        }
                    } else {
                        toastr.success('{{ translate('Customer Added successfully!') }}', {
                            CloseButton: true,
                            ProgressBar: true
                        });
                        $('#customer-search-result').html('')

                        const addressId = $('.customer-address-example-modal-sm #new-customer-contact').val() || '';
                        $('.add-customer-address-example-modal-sm #customer-contact').val(addressId);

                        $('.add-customer-address-example-modal-sm').modal('hide');

                        $('.customer-address-example-modal-sm').modal('show');
                    $('#customer-search-result').html(data.html)

                }
            }
        });
    });
</script>
    <script>
        function getRequest(route, id, count) {
            var selectId =  '#' + id + '_' + count;

            // alert(id)
            $.get({
                url: route,
                dataType: 'json',
                success: function(data) {
                    if (!data.options.price) {
                        // $('#' + id + '_' + count).empty().append(data.options);
                        SERVICE_TYPE_OPTION = data.options;
                        $('.category_service_container').html(SERVICE_TYPE_OPTION)

                    } else {
                        document.getElementById(id + '_' + count).value = data.options.price;

                    }

                },
            });
        }
    </script>


    <script>
        $(document).on('ready', function() {
            $('.js-select2-custom').each(function() {
                var select2 = $.HSCore.components.HSSelect2.init($(this));
            });
        });
    </script>

    <script src="{{ asset('assets/admin') }}/js/tags-input.min.js"></script>
@endpush