@extends('layouts.admin')
@section('title', 'Product Edit')

@section('page-header')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h4 class="m-0">Product Edit</h4>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item">
                            <a href="{{ route('dashboard') }}">Dashboard</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('products.index') }}">Product List</a>
                        </li>
                        <li class="breadcrumb-item active">Product Edit</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->
@endsection

{{-- main content --}}
@section('content')

    {{-- button list --}}
    <div class="row">
        <div class="col-md-12 col-sm-12 mb-3 text-right">
            <a href="{{ route('products.index') }}" class="btn btn-primary">Product List</a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h4 class="card-title">Product Edit</h4>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @foreach ($errors->all() as $message)
                        <p class="text-center text-danger">{{ $message }}</p>
                    @endforeach
                    <form action="{{ route('products.update', ['product' => $product->id]) }}" enctype="multipart/form-data"
                        method="post">
                        @csrf @method('PUT')
                        <div class="row">

                            <div class="col-md-4 col-sm-12">
                                <div class="form-group">
                                    <label for="name">Name*</label>
                                    <input type="text" name="name" value="{{ $product->name }}" id="name"
                                        placeholder="Name*" class="form-control @error('name') is-invalid @enderror"
                                        required>
                                    @error('name')
                                        <p class="text-danger"><small>{{ $message }}</small></p>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="form-group">
                                    <label for="caegory">Category*</label>
                                    <select name="category_id" id="category" class="form-control" required>
                                        <option value="" hidden>Select a Category</option>
                                        @if ($categories->isNotEmpty())
                                            @foreach ($categories as $category)
                                                <option @if ($category->id == $product->category_id) selected @endif
                                                    value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>

                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="form-group">
                                    <label for="brand">Brand</label>
                                    <select name="brand_id" id="brand" class="form-control">
                                        <option value="" hidden>Select a Brand</option>
                                        @if ($brands->isNotEmpty())
                                            @foreach ($brands as $brand)
                                                <option @if ($brand->id == $product->brand_id) selected @endif
                                                    value="{{ $brand->id }}">{{ $brand->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="form-group">
                                    <label for="product_type">Product Type*</label>
                                    <select name="product_type_id" id="product_type" class="form-control" required>
                                        <option value="" hidden>Select a Product Type</option>
                                        @if ($types->isNotEmpty())
                                            @foreach ($types as $type)
                                                <option @if ($type->id == $product->product_type_id) selected @endif
                                                    value="{{ $type->id }}">{{ $type->name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <div class="form-group">
                                    <label for="sub_title">Sub-Title*</label>
                                    <input type="text" value="{{ $product->sub_title }}" name="sub_title" id="sub_title"
                                        placeholder="Sub Title*" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12">
                                <label for="customFile">Product Thumbnail</label>
                                <div class="custom-file">
                                    <input type="file" name="product_thumbnail" class="custom-file-input"
                                        id="customFile">
                                    <label class="custom-file-label" for="customFile" id="customFile_place">Choose
                                        file</label>
                                </div>
                            </div>
                            {{-- product description --}}
                            <div class="col-md-12 col-sm-12 mt-4 mt-lg-5">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="medium"
                                            @if ($product->medium_description) checked @endif id="medium_description_check">
                                        <label for="medium_description_check" class="cursor-pointer">Add Product Medium
                                            Description</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12" id="medium_description">
                                <div class="form-group">
                                    <label for="description">Product Medium Description</label>
                                    <textarea name="medium_description" id="descriptio" cols="30" rows="5" class="form-control"
                                        placeholder="Medium Description">{!! html_entity_decode($product->medium_description) !!}</textarea>
                                    <!-- Textarea id was:description -->
                                </div>
                            </div>
                            {{-- end product description --}}

                            {{-- product specification --}}
                            <div class="col-md-12 col-sm-12 mt-3 mt-lg-4">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="specifiaction"
                                            @if (!is_null($product->specification)) checked @endif id="specification_box_check">
                                        <label for="specification_box_check" class="cursor-pointer">Add Product
                                            Specification</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-12 col-sm-12" id="specification_box">
                                <label for="specification">Product Specification</label>
                                @if (!empty($spc_row))
                                    @foreach ($spc_row ?? [] as $key => $row)
                                                                                <div class="row mb-2" id="remove_{{ $id }}">
                                            <div class="col-md-5 col-sm-12">
                                                <input type="text" name="specification_header[]"
                                                    value="{{ $row[0] }}" class="form-control"
                                                    placeholder="Title">
                                            </div>
                                            <div class="col-md-5 col-sm-12">
                                                <input type="text" name="specification_value[]"
                                                    value="{{ $row[1] }}" class="form-control"
                                                    placeholder="Details">
                                            </div>
                                            <div class="col-md-2 col-sm-12">
                                                @if ($key == 0)
                                                    <button type="button" class="btn btn-info"
                                                        id="specifcation_new_add">
                                                        <i class="fas fa-plus"></i>
                                                    </button>
                                                @else
                                                    <button type="button"
                                                        class="btn btn-outline-danger remove_specification"
                                                        data-box_id="{{ $id }}">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row mb-2" id="remove_698745632">
                                        <div class="col-md-5 col-sm-12">
                                            <input type="text" name="specification_header[]" class="form-control"
                                                placeholder="Title">
                                        </div>
                                        <div class="col-md-5 col-sm-12">
                                            <input type="text" name="specification_value[]" class="form-control"
                                                placeholder="Details">
                                        </div>
                                        <div class="col-md-2 col-sm-12">
                                            <button type="button" class="btn btn-info" id="specifcation_new_add">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            {{-- end product specification --}}
                                                        {{-- order information --}}
                            <div class="col-md-12 col-sm-12 mt-4 mt-lg-5">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="order_information_check"
                                            @if (!is_null($product->order_information)) checked @endif id="order_box_check">
                                        <label for="order_box_check" class="cursor-pointer">Add Order Information</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12" id="order_box">
                                @if (!empty($order_row))
                                    @foreach ($order_row as $key => $row)
                                                                                <div class="row mb-2" id="remove_{{ $id }}">
                                            <div class="col-md-5 col-sm-12">
                                                <input type="text" name="order_info_header[]"
                                                    value="{{ $row[0] }}" class="form-control"
                                                    placeholder="Title">
                                            </div>
                                            <div class="col-md-5 col-sm-12">
                                                <input type="text" name="order_info_value[]"
                                                    value="{{ $row[1] }}" class="form-control"
                                                    placeholder="Details">
                                            </div>

                                            <div class="col-md-2 col-sm-12">
                                                @if ($key == 0)
                                                    <button type="button" class="btn btn-info"
                                                        id="order_information_new_add">
                                                        <i class="fas fa-plus"></i>
                                                    </button>
                                                @else
                                                    <button type="button"
                                                        class="btn btn-outline-danger remove_order_info"
                                                        data-box_id="{{ $id }}">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                @else
                                    <div class="row mb-2" id="remove_968852222147744">
                                        <div class="col-md-5 col-sm-12">
                                            <input type="text" name="order_info_header[]" class="form-control"
                                                placeholder="Title">
                                        </div>
                                        <div class="col-md-5 col-sm-12">
                                            <input type="text" name="order_info_value[]" class="form-control"
                                                placeholder="Details">
                                        </div>

                                        <div class="col-md-2 col-sm-12">
                                            <button type="button" class="btn btn-info" id="order_information_new_add">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endif

                            </div>
                            {{-- end order information --}}

                            {{-- end product thumbnail --}}
                        </div>
                        <br />
                        <div class="form-group">
                            <button type="submit" class="btn btn-dark">Save Changes</button>
                            <a href="{{ route('products.index') }}" class="btn btn-outline-danger">Cancel</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- product gallery --}}
    <div class="row">
        <div class="col-md-12 col-sm-1">
            <div class="card card-primary">
                <div class="card-header">
                    <div class="card-title">Product Gallery</div>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool active" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>

                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        @if ($product->images->isNotEmpty())
                            @foreach ($product->images as $image)
                                <div class="col-md-3 col-sm-12 text-center">
                                    <img src="{{ $image->get_download_link('storage/files/product/images/') }}"
                                        style="width:220px;height:220px;" alt="Product Gallery" class="img-thumbnail" />
                                    <div class="text-center mt-1 mb-1">
                                        <form action="{{ route('files.destroy', ['file' => $image->id]) }}"
                                            method="post">
                                            @csrf @method('DELETE')
                                            <button type="submit" class="btn btn-outline-danger delete_btn"><i
                                                    class="fas fa-trash"></i></button>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    <form id="gallery_form" action="{{ route('gallery_upload', ['fileable_id' => $product->id]) }}"
                        enctype="multipart/form-data" method="post">
                        @csrf
                        <div class="row" id="gallery_box_items">
                            
                            <div class="col-md-3 col-sm-12 text-center">
                                <input type="file" accept="image/*" style="display: none;"
                                    id="gallery_{{ $id }}" name="product_gallery[]" />
                                <img class="img-thumbnail" style="width:220px;height:220px;"
                                    id="gallery_{{ $id }}_pre" src="{{ asset('dist/img/default_image.png') }}"
                                    alt="Product Image" />
                                <p class="text-center mt-1">
                                    <button type="button" data-id="{{ $id }}"
                                        class="btn btn-info gallery_upload">
                                        <i class="fas fa-upload"></i>
                                    </button>
                                    <button type="button" class="btn btn-success" id="add_new_product_btn">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </p>
                            </div>

                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-dark">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- end product gallery --}}

    {{-- product manual & warranties --}}
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h4 class="card-title">Manual & Warranties</h4>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if ($product->manual_warranties->isNotEmpty())
                        @foreach ($product->manual_warranties as $manual_warranty)
                            <div class="border rounded p-2 mb-1">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <h5>{{ $manual_warranty->name }}</h5>
                                        <p class="text-muted">{{ $manual_warranty->sub_title }}</p>

                                        <div class="d-flex d-flex justify-content-between">
                                            <span>Download :
                                                {{ $manual_warranty->get_size('storage/files/product/document/') }}
                                                KB</span>
                                            <span>Format : <span
                                                    class="text-uppercase">{{ $manual_warranty->file_type }}</span></span>
                                            <span>Modified :
                                                {{ $manual_warranty->last_modified('storage/files/product/document/') }}</span>
                                        </div>

                                    </div>
                                    <div class="d-flex m-auto mt-2 align-items-center">
                                        <a href="{{ $manual_warranty->get_download_link('storage/files/product/document/') }}"
                                            download class="btn btn-sm btn-outline-dark"><i
                                                class="fa fa-download"></i></a>
                                        &nbsp;
                                        <a href="{{ $manual_warranty->get_pdf_view_link() }}" target="_blank"
                                            class="btn btn-sm btn-outline-dark"><i class="fas fa-eye"></i></a>&nbsp;
                                        <a href="{{ route('files.edit', ['file' => $manual_warranty->id]) }}"
                                            class="btn btn-sm btn-outline-dark"><i class="fas fa-edit"></i></a>&nbsp;
                                        <form id="warranty-delete-{{ $manual_warranty->id }}"
                                            action="{{ route('files.destroy', ['file' => $manual_warranty->id]) }}"
                                            method="post">
                                            @csrf @method('DELETE')
                                        </form>
                                        <button data-type="warranty" data-id="{{ $manual_warranty->id }}"
                                            class="delete_btn btn btn-sm btn-outline-dark"><i
                                                class="fas fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    {{-- create form --}}
                    <form action="{{ route('manual_document_store', ['fileable_id' => $product->id]) }}"
                        enctype="multipart/form-data" method="post">
                        @csrf
                        <div class="col-md-12 col-sm-12" id="manual_warranties_box">
                            <div class="p-3 ">
                                <div class="row" id="box-1">
                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Name*</label>
                                            <input type="text" name="manual_name[]" id="manual_name"
                                                placeholder="Name*" class="form-control" required />
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Subtitle</label>
                                            <input type="text" name="manual_subtitle[]" id="manual_subtitle"
                                                placeholder="Subtitle*" class="form-control" />
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12">
                                        <div class="custom-file">
                                            <input type="file" accept=".pdf" name="manual_warranties[]"
                                                class="custom-file-input" required />
                                            <label class="custom-file-label" for="customFile">Choose file</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <button class="btn btn-info" type="button" id="manual_add_new"><b><i
                                                    class="fas fa-plus"></i></b></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-dark">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- end product manual & warranties --}}

    {{-- product catalogue --}}
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="card card-primary">
                <div class="card-header">
                    <h4 class="card-title">
                        Product Catalogue
                    </h4>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse"><i
                                class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if ($product->catalogues->isNotEmpty())
                        @foreach ($product->catalogues as $catalogue)
                            <div class="border rounded p-2 mb-1">
                                <div class="row">
                                    <div class="col-md-12 col-sm-12">
                                        <h5>{{ $catalogue->name }}</h5>
                                        <p class="text-muted">{{ $catalogue->sub_title }}</p>

                                        <div class="d-flex d-flex justify-content-between">
                                            <span>Download : {{ $catalogue->get_size('storage/files/product/document/') }}
                                                KB</span>
                                            <span>Format : <span
                                                    class="text-uppercase">{{ $catalogue->file_type }}</span></span>
                                            <span>Modified :
                                                {{ $catalogue->last_modified('storage/files/product/document/') }}</span>
                                        </div>

                                    </div>
                                    <div class="d-flex m-auto mt-2 align-items-center">
                                        <a href="{{ $catalogue->get_download_link('storage/files/product/document/') }}"
                                            download class="btn btn-sm btn-outline-dark"><i
                                                class="fa fa-download"></i></a>
                                        &nbsp;
                                        <a href="{{ $catalogue->get_pdf_view_link() }}" target="_blank"
                                            class="btn btn-sm btn-outline-dark"><i class="fas fa-eye"></i></a>&nbsp;
                                        <a href="{{ route('files.edit', ['file' => $catalogue->id]) }}"
                                            class="btn btn-sm btn-outline-dark"><i class="fas fa-edit"></i></a>&nbsp;
                                        <form id="catalogue-delete-{{ $catalogue->id }}"
                                            action="{{ route('files.destroy', ['file' => $catalogue->id]) }}"
                                            method="post">
                                            @csrf @method('DELETE')
                                        </form>
                                        <button class="btn btn-sm btn-outline-dark delete_btn" data-type="catalogue"
                                            data-id="{{ $catalogue->id }}"><i class="fas fa-trash"></i></button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif
                    <form action="{{ route('catalogue_document_store', ['fileable_id' => $product->id]) }}"
                        enctype="multipart/form-data" method="post">
                        @csrf
                        <div class="col-md-12 col-sm-12" id="catalogue_box">
                            <div class="p-3 ">
                                <div class="row" id="box-1">
                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Name*</label>
                                            <input type="text" name="catalogue_name[]" id="manual_name"
                                                placeholder="Name*" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12">
                                        <div class="form-group">
                                            <label>Subtitle</label>
                                            <input type="text" name="catalogue_subtitle[]" id="manual_subtitle"
                                                placeholder="Subtitle*" class="form-control">
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-12">
                                        <div class="custom-file">
                                            <input type="file" accept=".pdf" name="catalogue[]"
                                                class="custom-file-input" id="manual_warranties_1">
                                            <label class="custom-file-label" for="customFile"
                                                id="manual_warranties_1">Choose file</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 col-sm-12">
                                        <button class="btn btn-info" type="button" id="catalogue_add_new"><b><i
                                                    class="fas fa-plus"></i></b></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-dark" type="submit">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

{{-- extra css --}}
@push('css')
    {{-- select js --}}
    <link rel="stylesheet" href="{{ asset('plugins/select2/css/select2.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
    {{-- nice check --}}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icheck-bootstrap@3.0.1/icheck-bootstrap.min.css">
    {{-- summer note --}}
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
@endpush

{{-- extra js --}}
@push('js')
    {{-- select js --}}
    <script src="{{ asset('plugins/select2/js/select2.min.js') }}"></script>
    {{-- summer note --}}
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
@endpush

{{-- extra js --}}
@push('js')
    <script>
        $(function() {
            $('#category').select2({
                theme: "bootstrap4",
                placeholder: "Select a Category",
                allowClear: true,
            });
            $('#brand').select2({
                theme: "bootstrap4",
                "placeholder": "Select a Brand",
                allowClear: true,
            });

            $('#product_type').select2({
                theme: "bootstrap4",
                "placeholder": "Select a Product Type",
                allowClear: true,
            });

            // summer note editor install
            ['description', 'specification', 'order_information'].forEach(function(item) {
                // $('#'+item).summernote({
                //     placeholder: "Write here...",
                //     height: 100,
                // });
            });

            // hide all editor box
            ['medium_description', 'specification_box', 'order_box', 'product_thumbnail_box'].forEach(function(
            item) {
                if ($('#' + item + '_check').is(':checked')) {
                    $('#' + item).show();
                } else {
                    $('#' + item).hide();
                }
            });
        });

        $(document).ready(function() {
            $('#order_information_new_add').on("click", function() {
                let id = Number(Math.random() * 3025).toFixed(0);
                let new_column = `<div class="row mb-2" id="remove_${id}">
                <div class="col-md-5 col-sm-12">
                    <input type="text" name="order_info_header[]" class="form-control" placeholder="Title" >
                </div>
                <div class="col-md-5 col-sm-12">
                    <input type="text" name="order_info_value[]" class="form-control" placeholder="Details" >
                </div>
                <div class="col-md-2 col-sm-12">
                    <button type="button" class="btn btn-outline-danger remove_order_info" data-box_id="${id}">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>`;
                $("#order_box").append(new_column);
            });

            $(document).on('click', '.remove_order_info', function() {
                let id = $(this).data('box_id');
                $('#remove_' + id).remove();
            });

            // catalogue
            $('#catalogue_add_new').on('click', function() {
                let id = Number(Math.random() * 5025 * Math.random()).toFixed(0);
                let new_column = `<div class="p-3 " id="remove_${id}">
                                    <div class="row" id="box-1">
                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group">
                                                <label>Name*</label>
                                                <input type="text" name="catalogue_name[]" id="manual_name" placeholder="Name*" class="form-control">
                                            </div>
                                        </div>

                                        <div class="col-md-6 col-sm-12">
                                            <div class="form-group">
                                                <label>Subtitle</label>
                                                <input type="text" name="catalogue_subtitle[]" id="manual_subtitle" placeholder="Subtitle*" class="form-control">
                                            </div>
                                        </div>

                                        <div class="col-md-6 col-sm-12">
                                            <div class="custom-file">
                                                <input type="file" accept=".pdf" name="catalogue[]" class="custom-file-input" >
                                                <label class="custom-file-label" for="customFile" >Choose file</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <button class="btn btn-outline-danger remove_catalogue" data-id="${id}" type="button">
                                                <b><i class="fas fa-trash"></i></b>
                                            </button>
                                        </div>
                                    </div>
                                </div>`;
                $("#catalogue_box").append(new_column);
            });

            $(document).on('click', '.remove_catalogue', function() {
                let id = $(this).data("id");
                $('#remove_' + id).remove();
            });

            // select file placeholder
            $(document).on('change', '.custom-file-input', function() {
                if (this.files && this.files[0]) {
                    $(this).next('label').text(this.files[0].name);
                }
            });

            $('#manual_add_new').on("click", function() {
                let id = Number(Math.random() * 1025 * Math.random()).toFixed(0);
                let new_column = `<div class="p-3 " id="remove_${id}">
                            <div class="row" id="box-1">
                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Name*</label>
                                        <input type="text" name="manual_name[]" placeholder="Name*" class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <div class="form-group">
                                        <label>Subtitle</label>
                                        <input type="text" name="manual_subtitle[]" placeholder="Subtitle*" class="form-control">
                                    </div>
                                </div>

                                <div class="col-md-6 col-sm-12">
                                    <div class="custom-file">
                                        <input type="file" accept=".pdf" name="manual_warranties[]" class="custom-file-input">
                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12">
                                    <button class="btn btn-outline-danger remove_manual" type="button" data-box_id="${id}">
                                        <b><i class="fas fa-trash"></i></b>
                                    </button>
                                </div>
                            </div>
                        </div>`;
                $('#manual_warranties_box').append(new_column);
            });

            $(document).on('click', '.remove_manual', function() {
                let id = $(this).data("box_id");
                $('#remove_' + id).remove();
            });

            // gallery add new column
            $("#add_new_product_btn").on('click', function() {
                let id = Number(Math.random() * 2025).toFixed(0);
                let new_column = `<div class="col-md-3 col-sm-12 text-center" id="remove_${id}">
                                <input type="file" accept="image/*" style="display: none;" id="gallery_${id}" name="product_gallery[]" />
                                <img class="img-thumbnail" style="width:220px;height:220px;" id="gallery_${id}_pre" src="{{ asset('dist/img/default_image.png') }}" alt="Product Image" />
                                <p class="text-center mt-1">
                                    <button type="button" data-id="${id}" class="btn btn-info gallery_upload">
                                        <i class="fas fa-upload"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-danger remove_gallery" data-id="${id}">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </p>
                            </div>`;
                $('#gallery_box_items').append(new_column);
            });

            $(document).on('click', '.remove_gallery', function() {
                let id = $(this).data('id');
                $('#remove_' + id).remove();
            });

            $(document).on("click", ".gallery_upload", function() {
                let id = $(this).data('id');
                $('#gallery_' + id).trigger('click');
            });

            $(document).on('change', 'input[name="product_gallery[]"]', function() {
                let id = $(this).attr('id');
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#' + id + '_pre').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            //    manual and catalogu delete
            $('.delete_btn').on('click', function() {
                let id = $(this).data('id');
                let type = $(this).data('type');
                Swal.fire({
                    icon: "question",
                    title: "Are you sure to delete?",
                    text: "You won't be able to undo this data.",
                    showConfirmButton: true,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, Delete it!',
                    cancelButtonText: 'No, Cancel!',
                }).then(res => {
                    if (res.isConfirmed) {
                        $('#' + type + '-delete-' + id).submit();
                    }
                });
            })

            // new specification column add
            $('#specifcation_new_add').on('click', function() {
                let id = Number(Math.random() * 1025).toFixed(0);
                let new_column = `<div class="row mb-2" id="remove_${id}">
                <div class="col-md-5 col-sm-12">
                    <input type="text" name="specification_header[]" class="form-control" placeholder="Title *" required>
                </div>
                <div class="col-md-5 col-sm-12">
                    <input type="text" name="specification_value[]" class="form-control" placeholder="Details *" required>
                </div>
                <div class="col-md-2 col-sm-12">
                    <button type="button" class="btn btn-outline-danger remove_specification" data-box_id="${id}">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </div>`;
                $("#specification_box").append(new_column);
            });

            $(document).on('click', '.remove_specification', function() {
                let box_id = $(this).data('box_id');
                $('#remove_' + box_id).remove();
            });

            // medium description box
            $('#medium_description_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#medium_description').show();
                } else {
                    $('#medium_description').hide();
                }
            });
            // product specification
            $('#specification_box_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#specification_box').show();
                } else {
                    $('#specification_box').hide();
                }
            });

            // order information
            $('#order_box_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#order_box').show();
                } else {
                    $('#order_box').hide();
                }
            });

            // product thumbnail information
            $('#product_thumbnail_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#product_thumbnail_box').show();
                } else {
                    $('#product_thumbnail_box').hide();
                }
            });

            // product thumbnail select
            $("#customFile").on('change', function() {
                $('#customFile_place').text($(this).val());
            })
        });
    </script>
@endpush