@extends('layouts.master')

@push('head-css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmp1HYZDFaVKK//63EcZq4iFWFjxSL+Z3T/aCt4IO9Cejm03q3NKKYN6pFQzY0SBOr8h+eCIAZHPXcpZaNw==" crossorigin="anonymous" />
@endpush

@section('content')
<style>
    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #999;
    }
    .select2-dropdown .select2-search__field:focus, .select2-search--inline .select2-search__field:focus {
        border: 0px;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        margin: 0 13px;
    }
    .select2-container--default .select2-selection--multiple {
        border: 1px solid #cfd1da;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__clear {
        cursor: pointer;
        float: right;
        font-weight: bold;
        margin-top: 8px;
        margin-right: 15px;
    }
</style>
    <div class="row">
        <div class="col-md-12">
            <div class="card card-dark">
                <div class="card-header">
                    <h3 class="card-title">@lang('app.edit') @lang('app.service')</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <form role="form" id="createForm"  class="ajax-form" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="id" id="id" value="{{ $businessService->id }}">
                        <div class="row">
                            <div class="col-md">
                                <!-- text input -->
                                <div class="form-group">
                                    <label>@lang('app.service') @lang('app.name')</label>
                                    <input type="text" name="name" id="name" value="{{ $businessService->name }}" class="form-control form-control-lg" autocomplete="off">
                                </div>
                            </div>
                           
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>@lang('app.center')</label>
                                    
                                        <select name="location_id[]" id="location_id" class="form-control select2" multiple="multiple" style="width: 100%"  autocomplete="off">
                                            @foreach($locations as $location)
                                                <option 
                                                    @if(in_array($location->id, $selectedLocations)) selected @endif
                                                    value="{{ $location->id }}">{{ $location->name .', '. $location->city }}</option>
                                            @endforeach
                                        </select>

                                </div>
                            </div>
                            
                            
                            <div class="col-md-6">

                                <div class="form-group">
                                    <label>@lang('modules.services.slot')</label>
                                    <div class="input-group">
                                        <input type="text" onkeypress="return isNumberKey(event)" class="form-control form-control-lg" name="time" value="{{ $businessService->time }}">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary dropdown-toggle text-capitalize" id="time-type-select" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">@lang('app.'.$businessService->time_type)</button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item time_type text-capitalize" data-type="minutes" href="javascript:;">@lang('app.minutes')</a>
                                                {{-- <a class="dropdown-item time_type text-capitalize" data-type="hours" href="javascript:;">@lang('app.hours')</a> --}}
                                                {{-- <a class="dropdown-item time_type text-capitalize" data-type="days" href="javascript:;">@lang('app.days')</a> --}}
                                            </div>
                                        </div>

                                        <input type="hidden" id="time-type" name="time_type" value="{{ $businessService->time_type }}">

                                    </div>

                                </div>
                            </div>
                            <div class="w-100"></div>
                            <div class="col-md-6">
                                <!-- text input -->
                                <div class="form-group">
                                    <label>@lang('app.serviceDates')</label>
                                    {{-- <input type="text" name="service_dates" id="choosed-dates" class="form-control form-control-lg" value="{{$service_dates}}" autocomplete="off"> --}}
                                    <div id="choosed-dates" data-date="{{$service_dates}}"></div>
                                     <input type="hidden" value="{{$service_dates}}" name="service_dates"  id="choosed-dates-input">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <ul class="datepicker-selected-dates">
                                    @foreach (explode(',',$service_dates) as $service_date)
                                        <li data-date="{{$service_date}}">{{$service_date}}</li>
                                    @endforeach
                                </ul>
                            </div>
                            
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label >@lang('app.service') @lang('app.image')</label>
                                    <div class="card">
                                        <div class="card-body">
                                            <input type="file" id="input-file-now" name="service_image" accept=".png,.jpg,.jpeg" data-default-file="{{ $businessService->service_image_url  }}" class="dropify"
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                {{-- <label >@lang('app.banner') @lang('app.image')</label>
                                <button type="button" class="btn btn-block btn-outline-info btn-sm col-md-2 select-image-button" style="margin-bottom: 10px;display: none "><i class="fa fa-upload"></i> File Select Or Upload</button>
                                <div id="file-upload-box" >
                                    <div class="row" id="file-dropzone">
                                        <div class="col-md-12">
                                            <div class="dropzone"
                                                    id="file-upload-dropzone">
                                                {{ csrf_field() }}
                                                <div class="fallback">
                                                    <input name="file" type="file" multiple/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="text-danger">@lang('modules.theme.recommendedResolutionNote')</h6> --}}


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

                                <div class="form-group">
                                    <label for="">@lang('app.status')</label>
                                    <select name="status" id="" class="form-control form-control-lg">
                                        <option
                                                @if($businessService->status == 'active') selected @endif
                                        value="active">@lang('app.active')</option>
                                        <option
                                                @if($businessService->status == 'deactive') selected @endif
                                        value="deactive">@lang('app.deactive')</option>
                                    </select>
                                </div>

                                <div class="form-group align-right">
                                    <button type="button" id="save-form" class="btn btn-success btn-light-round"><i
                                                class="fa fa-check"></i> @lang('app.save')</button>
                                </div>

                            </div>
                        </div>

                    </form>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
@endsection

@push('footer-js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>

    <script>
    $('.dropify').dropify({
            messages: {
                default: '@lang("app.dragDrop"). @lang("modules.theme.recommendedServiceResolutionNote")',
                replace: '@lang("app.dragDropReplace")',
                remove: '@lang("app.remove")',
                error: '@lang('app.largeFile')'
            }
        });
        $(function () {
            $('#description').summernote({
                dialogsInBody: true,
                height: 300,
                toolbar: [
                // [groupName, [list of button]]
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough']],
                ['fontsize', ['fontsize']],
                ['para', ['ul', 'ol', 'paragraph']],
                ["view", ["fullscreen"]]
            ]
            })

            $('#discount-type').val('{{ $businessService->discount_type }}');
            $('#time-type').val('{{ $businessService->time_type }}');
        })
        var mockFile = {!! $images !!};
        var defaultImage = '';
        var lastIndex = 0;

        {{-- Dropzone.autoDiscover = false;
        //Dropzone class
        myDropzone = new Dropzone("#file-upload-dropzone", {
            url: "{{ route('admin.business-services.updateImages') }}",
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            paramName: "file",
            maxFilesize: 10,
            maxFiles: 1,
            acceptedFiles: "image/*",
            autoProcessQueue: false,
            uploadMultiple: false,
            addRemoveLinks:true,
            parallelUploads:10,
            init: function () {
                myDropzone = this;
            },
            dictDefaultMessage: "@lang('app.dropzone.defaultMessage')",
            dictRemoveFile: "@lang('app.dropzone.removeFile')"
        });

        myDropzone.on('sending', function(file, xhr, formData) {
            var id = $('#serviceID').val();

            formData.append('service_id', id);
            if (mockFile.length > 0) {
                formData.append('uploaded_files', JSON.stringify(mockFile));
            }
            formData.append('default_image', defaultImage);
        }); --}}

     {{--   myDropzone.on('addedfile', function (file) {
            var index = mockFile.findIndex(x => x.name == file.name);

            if (index === -1) {
                index = lastIndex + 1;
            }
            lastIndex = index;

             var div = document.createElement('div');
            div.className = 'form-check form-check-inline';
            var input = document.createElement('input');
            input.className = 'form-check-input';
            input.type = 'radio';
            input.name = 'default_image';
            input.id = 'default-image-'+index;
            input.value = file.name;
            if ('{{ $businessService->default_image }}' == file.name) {
                input.checked = true;
            }
            div.appendChild(input);
            var label = document.createElement('label');
            label.className = 'form-check-label';
            label.innerHTML = "@lang('app.dropzone.makeDefaultImage')";
            label.htmlFor = 'default-image-'+index;
            div.appendChild(label);
            file.previewTemplate.appendChild(div); 
        })--}}

        {{-- myDropzone.on('removedfile', function (file) {
            var index = mockFile.findIndex(x => x.name == file.name);
            if(index != -1)      
            {
                mockFile.splice(index, 1);
                myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
            }
            console.log(mockFile.length);
        })

        // Create the mock file:
        mockFile.forEach(file => {
            var path = "{{ asset_url('service/'.$businessService->id.'/:file_name') }}";
            path = path.replace(':file_name', file.name);

            myDropzone.emit('addedfile', file);

            myDropzone.emit('thumbnail', file, path);

            // myDropzone.createThumbnailFromUrl(file, path);

            myDropzone.files.push(file);
            myDropzone.emit("complete", file);
        });
       
        myDropzone.options.maxFiles = myDropzone.options.maxFiles - mockFile.length;

        myDropzone.on("maxfilesexceeded", function(file) { this.removeFile(file); });  --}}

        function createSlug(value) {
            value = value.replace(/\s\s+/g, ' ');
            let slug = value.split(' ').join('-').toLowerCase();
            slug = slug.replace(/--+/g, '-');
            $('#slug').val(slug);
        }

        $('#name').keyup(function(e) {
            createSlug($(this).val());
        });

        $('#slug').keyup(function(e) {
            createSlug($(this).val());
        });

        $('.discount_type').click(function () {
            var type = $(this).data('type');

            $('#discount-type-select').html(type);
            $('#discount-type').val(type);
            calculateDiscountedPrice();
        });

        $('.time_type').click(function () {
            var type = $(this).data('type');

            $('#time-type-select').html(type);
            $('#time-type').val(type);
        });

        

        $('#save-form').click(function () {

            $.easyAjax({
                url: '{{route('admin.business-services.update', $businessService->id)}}',
                container: '#createForm',
                type: "POST",
                redirect: true,
                file:true,
                data: $('#createForm').serialize(),
                success: function (response) {
                    serviceID = response.serviceID;
                    $('#serviceID').val(response.serviceID);
                    defaultImage = response.defaultImage;

                    {{-- if (myDropzone.getQueuedFiles().length > 0) {
                        myDropzone.processQueue();
                    }
                    else{
                        var blob = new Blob();
                        blob.upload = { 'chunked': myDropzone.defaultOptions.chunking };
                        myDropzone.uploadFile(blob);
                    } --}}
                    var msgs = "@lang('messages.updatedSuccessfully')";
                    $.showToastr(msgs, 'success');
                    window.location.href = '{{ route('admin.business-services.index') }}'
                }
            })
        });

        $('#add-category').click(function () {
            window.location = '{{ route("admin.categories.create") }}';
        });

        $('#discount, #price').keyup(function () {
            calculateDiscountedPrice();
        });

        $('#discount, #price').change(function () {
            calculateDiscountedPrice();
        });

        $('#discount, #price').on('wheel', function () {
            calculateDiscountedPrice();
        });

        function calculateDiscountedPrice() {
            var price = $('#price').val();
            var discount = $('#discount').val();
            var discountType = $('#discount-type').val();

            if (discountType == 'percent') {
                if(discount > 100){
                    $('#discount').val(100);
                    discount = 100;
                }
            }
            else {
                if (parseInt(discount) > parseInt(price)) {
                    $('#discount').val(price);
                    discount = price;
                }
            }

            var discountedPrice = price;

            if(discount >= 0 && discount >= '' && price != '' && price > 0){
                if (discountType == 'percent') {
                    discountedPrice = parseFloat(price) - (parseFloat(price) * (parseFloat(discount) / 100));
                }
                else {
                    discountedPrice = parseFloat(price) - parseFloat(discount);
                }
            }

            if(discount != '' && price != '' && price > 0){
                $('#discounted-price').html(discountedPrice.toFixed(2));
            }
            else {
                $('#discounted-price').html('--');
            }
        }

        calculateDiscountedPrice();

        
        

        {{-- @if($businessService->start_date)
            let startDate = "{{date('Y-m-d',strtotime($businessService->start_date))}}";
            let moment_startDate = "{{date('Y-m-d',strtotime($businessService->start_date))}}";
        @else
            let startDate = moment_startDate.format('YYYY-MM-DD');
            let moment_startDate = moment();
        @endif

        @if($businessService->end_date != '0000-00-00')
            let endDate = "{{date('Y-m-d',strtotime($businessService->end_date))}}";
            let moment_endDate = "{{date('Y-m-d',strtotime($businessService->end_date))}}";
        @else
            let endDate = moment_endDate.format('YYYY-MM-DD');
            let moment_endDate = moment().add(30, 'days');
        @endif

        $('#start-date').datetimepicker({
            format: '{{ $date_picker_format }}',
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
            defaultDate: moment_startDate,
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            }
        }).on('dp.change', function(e) {
            startDate =  moment(e.date).format('YYYY-MM-DD');
        });
        
        $('#end-date').datetimepicker({
            format: '{{ $date_picker_format }}',    
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
            defaultDate:moment_endDate,
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            }
        }).on('dp.change', function(e) {
            endDate =  moment(e.date).format('YYYY-MM-DD');
        }); --}}

        let moment_chooseDate = moment();
        let chooseDate = moment_chooseDate.format('YYYY-MM-DD');
        $('#choosed-dates').datepicker({
            format: '{{ strtolower($date_picker_format) }}',    
            locale: '{{ $settings->locale }}',
            allowInputToggle: true,
            multidate:true,
            inline:true,
            startDate:'today',
            icons: {
                time: "fa fa-clock-o",
                date: "fa fa-calendar",
                up: "fa fa-arrow-up",
                down: "fa fa-arrow-down",
                previous: "fa fa-angle-double-left",
                next: "fa fa-angle-double-right",
            }
        }).on('dp.change', function(e) {
            chooseDate =  moment(e.date).format('YYYY-MM-DD');
        });
       // $('#choosed-dates').datepicker('setDates', selectedarray);
        var selectedarray = [];
        $('#choosed-dates').on('changeDate', function() {
            let selecteddates = $('#choosed-dates').datepicker('getFormattedDate');
            $('#choosed-dates-input').val(selecteddates);
            selectedarray = selecteddates.split(',');
            $('.datepicker-selected-dates').html('');
            $.each( selectedarray, function( key, value ) {
                $('.datepicker-selected-dates').append('<li  data-date="'+value+'">'+value+'<i class="fa fa-times"></i></li>');
            });
        });
        $('.datepicker-selected-dates').on('click','i',function(e){
            e.preventDefault();
            var li = $(this).parent('li');
            let removeDate = li.data('date');
            li.remove();
            selectedarray.splice( $.inArray(removeDate, selectedarray), 1 );
            $('#choosed-dates').datepicker('setDates', selectedarray);
        })

    </script>

@endpush