@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.add') @lang('app.service')</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <form role="form" id="createForm" class="ajax-form" method="POST">
                        @csrf

                        <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" class="form-control form-control-lg" @if (!empty($service)) value="{{ $service->name }}" @endif autocomplete="off">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>@lang('app.center')</label>
                                   
                                        <select name="location_id[]" multiple id="location_id" class="form-control form-control-lg select2" autocomplete="off">
                                            @foreach($locations as $location)
                                                <option value="{{ $location->id }}" selected >{{ $location->name .', '. $location->city }}</option>
                                            @endforeach
                                        </select>
                                    

                                </div>
                            </div>

                            

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

                                <div class="form-group">
                                    <label>@lang('modules.services.duration')</label>
                                    <div class="input-group">
                                        <input onkeypress="return isNumberKey(event)" type="text" class="form-control form-control-lg" name="time" @if (!empty($service)) value="{{ $service->time }}" @endif>
                                        <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">
                                                @if (!empty($service))
                                                    @switch($service->time_type)
                                                        @case('minutes')
                                                            @lang('app.minutes')
                                                            @break
                                                        @case('hours')
                                                            @lang('app.hours')
                                                            @break
                                                        @case('days')
                                                            @lang('app.days')
                                                            @break
                                                        @default
                                                    @endswitch
                                                @else
                                                    @lang('app.minutes')
                                                @endif
                                            </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="minutes">

                                    </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"  id="choosed-dates" class="form-control form-control-lg" autocomplete="off"> --}}

                                    <div id="choosed-dates"></div>
                                    <input type="hidden" name="service_dates" id="choosed-dates-input">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <ul class="datepicker-selected-dates">
                                </ul>
                            </div>
                            

                            {{-- <div class="col-md-6">
                                <div class="form-group">
                                    <label>@lang('modules.services.count')</label>
                                    <input type="number" name="no_of_staffs" id="no_of_staffs" class="form-control form-control-lg" @if (!empty($service)) value="{{ $service->no_of_staffs }}" @endif autocomplete="off">
                                </div>
                            </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" 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> --}}
                                {{-- <h6 class="text-danger">@lang('modules.businessServices.defaultImageNotice')</h6> --}}

                           

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

                                <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"]]
                ]
            })

            @if (!empty($service))
                $('#discount-type').val('{{ $service->discount_type }}');
                $('#time-type').val('{{ $service->time_type }}');
            @endif

            calculateDiscountedPrice();
        })

        {{-- Dropzone.autoDiscover = false;
        //Dropzone class
        myDropzone = new Dropzone("#file-upload-dropzone", {
            url: "{{ route('admin.business-services.storeImages') }}",
            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);
        });

        myDropzone.on('queuecomplete', function () {
            var msgs = "@lang('messages.createdSuccessfully')";
            $.showToastr(msgs, 'success');
            var id = $('#serviceID').val();
            var url = "{{URL::to('account/locations/:serviceId/service')}}";
            url = url.replace(':serviceId', id);
            window.location.href = url;
            //window.location.href = '{{ route('admin.business-services.index') }}'
        });
        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());
        });

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

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


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

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

        $('#save-form').click(function () {
            $.easyAjax({
                url: '{{route('admin.business-services.store')}}',
                container: '#createForm',
                type: "POST",
                redirect: true,
                file:true,
                data: $('#createForm').serialize(),
                success: function (response) {
                    {{-- if (myDropzone.getQueuedFiles().length > 0) {
                        serviceID = response.serviceID;
                        $('#serviceID').val(response.serviceID);
                        myDropzone.processQueue();
                    }
                    else{ --}}
                        var msgs = "@lang('messages.createdSuccessfully')";
                        $.showToastr(msgs, 'success');
                        var url = "{{URL::to('account/locations/:serviceId/service')}}";
                        url = url.replace(':serviceId', response.serviceID);
                        window.location.href = url;
                    {{-- } --}}
                }


            })
        });

        $('#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('--');
            }
        }


        function isNumberKey(evt)
        {
            var charCode = (evt.which) ? evt.which : evt.keyCode
            if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
            return true;
        }

        let moment_startDate = moment();
        let moment_endDate = moment().add(30, 'days');
        
        let startDate = moment_startDate.format('YYYY-MM-DD');
        let endDate = moment_endDate.format('YYYY-MM-DD');

        $('#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,
            startDate:'today',
            inline:true,
            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');
            
        });
        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