@extends('layouts.app')

@section('content')
    <div class="container-fluid">

        <form action="{{ route('admin.createBusiness') }}" method="post" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-12">
                    <div class="tree-view mb-3">
                        <h3>Business Category <span class="text-danger">*</span></h3>
                        <input type="text" class="js-tree-picker" placeholder="Select">
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="business-person-name">Business/Person Name <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="business_name" id="business-person-name"
                                    placeholder="Business/Person Name">
                                @error('business_name')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Address <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="address" rows="3" placeholder="Address"></textarea>
                                @error('address')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="Street">Street</label>
                                <input type="text" class="form-control" name="street" id="Street"
                                    placeholder="Street">
                                @error('street')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="mobile">Mobile No <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="mobile" id="mobile"
                                    placeholder="Mobile No">
                                <span class="text-success">( Multiple value separated by comma)</span>
                                @error('mobile')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="phone">Phone </label>
                                <input type="text" class="form-control" name="phone" id="phone"
                                    placeholder="Phone">
                                @error('phone')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email">Email <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="email" id="email"
                                    placeholder="Email">
                                <span class="text-success">( Multiple value separated by comma)</span>
                                @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="website">Website </label>
                                <input type="text" class="form-control" name="website" id="website"
                                    placeholder="Website">
                                <span class="text-success">( Multiple value separated by comma)</span>
                                @error('website')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="fax">Fax No </label>
                                <input type="text" class="form-control" name="fax" id="fax"
                                    placeholder="Fax No">
                                @error('fax')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="landmark">Landmark </label>
                                <input type="text" class="form-control" name="landmark" id="landmark"
                                    placeholder="Landmark">
                                @error('landmark')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="post_code">Post Code </label>
                                <input type="text" class="form-control" name="post_code" id="post_code"
                                    placeholder="Post Code">
                                @error('post_code')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Country <span class="text-danger">*</span></label>
                                <select class="form-control select2bs4" name="country" style="width: 100%;">
                                    <option selected="selected">Select One</option>
                                    <option>bangladesh</option>
                                </select>
                                @error('country')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Division <span class="text-danger">*</span></label>
                                <select class="form-control select2bs4" name="division" style="width: 100%;">
                                    <option selected="selected">Select One</option>
                                    <option value="dhaka">Dhaka</option>
                                </select>
                                @error('division')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>District <span class="text-danger">*</span></label>
                                <select class="form-control select2bs4" name="district" style="width: 100%;">
                                    <option selected="selected">Select One</option>
                                    <option value="dhaka">Dhaka</option>
                                </select>
                                @error('district')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Area <span class="text-danger">*</span></label>
                                <select class="form-control select2bs4" name="area" style="width: 100%;">
                                    <option selected="selected">Select One</option>
                                    <option value="dhaka">Dhaka</option>
                                </select>
                                @error('area')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="profile_thumb">Profile Thumb <span class="text-danger">*</span></label>

                                <input type="file" class="form-control" style="height: auto;" name="profile_thumb"
                                    id="profile_thumb">
                                <div>
                                    <img src="" class="profile-thumb-preview my-2" height="120" alt="">
                                </div>
                                <span class="text-success">(Image size must be less than 150KB)</span>
                                @error('profile_thumb')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="profile_logo">Profile Logo <span class="text-danger">*</span></label>
                                <input type="file" class="form-control" style="height: auto;" name="profile_logo"
                                    id="profile_logo">
                                <div>
                                    <img src="" class="profile-logo-preview my-2" height="120" alt="">
                                </div>
                                <span class="text-success">(Image size must be less than 150KB)</span>
                                @error('profile_logo')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="col-md-12 my-3">

                            <h3 style="font-weight: 600;">Profile Banner</h3>
                            <div class="d-flex mb-3">
                                <button class="add-profile-banner btn btn-success mr-2"><i
                                        class="fas fa-plus"></i></button>

                            </div>
                            <div class="profile-banner-row mb-1">

                                <div class="row mb-2">
                                    <div>
                                        <span>1</span>
                                    </div>
                                    <div class="col-1" style="align-self: center;">
                                        <div>
                                            <img src="" class="profile-banner-preview" height="60" width="60"
                                                alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="profile_banner">Profile Banner</label>

                                            <input type="file" class="form-control profile-banner-input" style="height: auto;"
                                                name="profile[].picture" id="profile_banner">
                                            {{-- <label class="custom-file-label" for="profile_banner-0">Choose
                                                    file</label> --}}
                                            <span class="text-success">(Image size must be less than 250KB)</span>
                                            @error('profile[].picture')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="profile_title">Title</label>
                                            <input type="text" class="form-control" name="profile[].title"
                                                id="profile_title" placeholder="Title">
                                            @error('profile[].title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    {{-- <div style="align-self: center;" class="col-md-2 mb-3">
                                        <button class="btn delete-profile-banner btn-danger "><i class="fas fa-trash"></i></button>
                                    </div> --}}
                                </div>

                            </div>

                        </div>


                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Short Description </label>
                                <textarea class="form-control" name="short_description" rows="3" placeholder="Short Description"></textarea>
                                @error('short_description')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description </label>
                                <textarea class="form-control summernote" name="description" rows="3" placeholder="Description"></textarea>
                                @error('description')
                                    <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>


                        <div class="col-md-12 mb-3">


                            <h3 style="font-weight: 600;">Gallery Image</h3>
                            <div class="d-flex mb-3">
                                <button class="add-gallery-image btn btn-success mr-2"><i
                                        class="fas fa-plus"></i></button>
                            </div>


                            <div class="gallery-image-row mb-1">

                                <div class="row mb-2">
                                     <div>
                                        <span>1</span>
                                    </div>
                                    <div class="col-1" style="align-self: center;">
                                        <div>
                                            <img src="" class="gallery-image-preview" height="60" width="60"
                                                alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="gallery_image">Gallery Image</label>

                                            <input type="file" class="form-control gallery-image-input" style="height: auto;"
                                                name="gallery[].picture" id="gallery_image">

                                            <span class="text-success">(Image size must be less than 250KB)</span>
                                            @error('gallery[].picture')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="gallery_title">Gallery Title </label>
                                            <input type="text" class="form-control" name="gallery[].title"
                                                id="gallery_title" placeholder="Gallery Title">
                                            @error('gallery[].title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>


                                </div>



                            </div>


                        </div>






                    </div>

                    <div class="d-flex justify-content-end">
                        <button class="btn btn-primary my-3">Submit</button>
                    </div>
                </div>
            </div>
        </form>

    </div>
@endsection

@section('scripts')
    <script>
        function previewImage(input, previewClass) {
            console.log('upload')
            if (input.files && input.files[0]) {
                const fileURL = URL.createObjectURL(input.files[0]);

                //   $(previewClass).attr('src', fileURL);

                console.log($(input).closest('.row').find(previewClass))
                    $(input).closest('.row').find(previewClass).attr('src', fileURL);

            }
        }
        $('#profile_thumb').change(function() {
            previewImage(this, '.profile-thumb-preview');
        });
        $('#profile_logo').change(function(){
            previewImage(this,'.profile-logo-preview')
        });

        $(document).on('change','.profile-banner-input',function() {
            previewImage(this,".profile-banner-preview")
        })
        $(document).on('change','.gallery-image-input',function() {
            previewImage(this, '.gallery-image-preview')
        })


        $('.add-profile-banner').on('click', function(e) {
            e.preventDefault();
            var profileLength = $('.profile-banner-row .row').length
            if ( profileLength >= 5) {
                alert('You can add a maximum of 5 profile banners');
                return;
            }
            let html = `
             <div class="row">
                <div>
                                        <span>${profileLength + 1}</span>
                                    </div>
                                    <div class="col-1">
                                        <div>
                                            <img src="" class="profile-banner-preview my-1" height="60" width="60"
                                                alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">

                                                <input type="file" class="form-control profile-banner-input" style="height: auto;" name="profile[].picture"
                                                    id="profile_banner">
                                            @error('profile[].picture')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="profile[].title"
                                                id="profile_title" placeholder="Title">
                                            @error('profile[].title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div style="align-self: center;" class="col-2 mb-3">
                                        <button class="btn delete-profile-banner btn-danger "><i class="fas fa-trash"></i></button>
                                    </div>
                                </div>
            `

            $('.profile-banner-row').append(html);

        })


        $(document).on('click', '.delete-profile-banner', function(e) {
            e.preventDefault();
            if ($('.profile-banner-row .row').length <= 1) {
                alert('At least one banner is required');
                return;
            }
            $(this).closest('.row').remove();
        })


        // $('.delete-profile-banner').on('click', function(e) {
        //     e.preventDefault();
        //     if ($('.profile-banner-row .row').length <= 1) {
        //         alert('At least one banner is required');
        //         return;
        //     }
        //     $('.profile-banner-row .row').last().remove();
        // });


        // gallery image section

        $('.add-gallery-image').on('click', function(e) {
            e.preventDefault();

            var galleryLength = $('.gallery-image-row .row').length
            if (galleryLength >= 10) {
                alert('You can add a maximum of 10 gallery images');
                return;
            }

            let html = `
             <div class="row">
                <div>
                    <span>${galleryLength + 1}</span>
                </div>
                                    <div class="col-1" style="align-self: center;">
                                        <div>
                                            <img src="" class="gallery-image-preview my-1" height="60" width="60"
                                                alt="">
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">

                                                <input type="file" class="form-control gallery-image-input" style="height: auto;" name="gallery[].picture"
                                                    id="gallery_image">

                                            @error('gallery[].picture')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <input type="text" class="form-control" name="gallery[].title"
                                                id="gallery_title" placeholder="Gallery Title">
                                            @error('gallery[].title')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div style="align-self: center;" class="col-2 mb-3">
                                        <button class="btn delete-gallery-image btn-danger "><i class="fas fa-trash"></i></button>
                                    </div>

                                </div>
            `

            $('.gallery-image-row').append(html);

        })


        $(document).on('click', '.delete-gallery-image', function(e) {
            e.preventDefault();
            if ($('.gallery-image-row .row').length <= 1) {
                alert('At least one gallery image is required');
                return;
            }
            // $('.gallery-image-row .row').last().remove();
            $(this).closest('.row').remove();
        });

        // Summernote
        $('.summernote').summernote({
            height: 200, // set editor height
            focus: true, // set focus to editable area after initializing summernote
            callbacks: {
                onImageUpload: function(files) {
                    uploadImage(files[0], "route here to upload image");
                },
            }
        })


        var myData = [{
                id: 0,
                title: 'Item 1 '
            }, {
                id: 1,
                title: 'Item 2',
                subs: [{
                    id: 10,
                    title: 'Item 2-1'
                }, {
                    id: 11,
                    title: 'Item 2-2'
                }, {
                    id: 12,
                    title: 'Item 2-3'
                }]
            }, {
                id: 2,
                title: 'Item 3'
            },
            // more data here
        ];

        var comboTree3 = $(".js-tree-picker").comboTree({
            source: myData,
            isMultiple: true,
            cascadeSelect: true,
            collapse: true,
        })
    </script>
@endsection