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

@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">Add Product</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 active">Add Product</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">
                <div class="card-header">
                    <h4 class="card-title">Add Product</h4>
                </div>
                <div class="card-body">
                    @foreach ($errors->all() as $message)
                        <p class="text-center text-danger">{{ $message }}</p>
                    @endforeach
                    <form action="{{ route('products.store') }}" enctype="multipart/form-data" method="post">
                        @csrf
                        <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="{{ old('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 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 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 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" 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="sub_title" id="customFile">Product Thumbnail*</label>
                                <div class="custom-file">
                                    <input type="file" accept="image/*" name="product_thumbnail"
                                        class="custom-file-input" id="customFile" required>
                                    <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">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="medium" id="medium_desc_check">
                                        <label for="medium_desc_check" class="cursor-pointer">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"></textarea>
                                    <!-- Textarea id was:description -->
                                </div>
                            </div>
                            {{-- end product description --}}

                            {{-- product specification --}}
                            <div class="col-md-12 col-sm-12 mt-4">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="specifiaction" id="specifiaction_check">
                                        <label for="specifiaction_check" class="cursor-pointer">Product
                                            Specification</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12 mb-2" id="specification_box">
                                <div class="row mb-2">
                                    <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>
                            </div>
                            {{-- end product specification --}}

                            {{-- order information --}}
                            <div class="col-md-12 col-sm-12 mt-4">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="order_information_check" id="order_check">
                                        <label for="order_check" class="cursor-pointer">Order Information</label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12 col-sm-12" id="order_box">
                                <label for="order_information">Order Information</label>
                                <div class="row mb-2">
                                    <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>
                                {{-- <div class="form-group">
                                    <label for="order_information">Order Information</label>
                                    <textarea name="order_information" id="order_information" cols="30" rows="5" class="form-control" placeholder="Order Information"></textarea>
                                </div> --}}
                            </div>
                            {{-- end order information --}}

                            {{-- add product manual & warranties --}}
                            <div class="col-md-12 col-sm-12 mt-4">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="manual_warranties_check"
                                            id="manual_warranties_check">
                                        <label for="manual_warranties_check" class="cursor-pointer">Manual &
                                            Warranties</label>
                                    </div>
                                </div>
                            </div>

                            <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">
                                            </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">
                                                <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>
                            {{-- end add product manuals & warranties --}}

                            {{-- add catalogue --}}
                            <div class="col-md-12 col-sm-12 mt-4">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="catalogue_check" id="catalogue_check">
                                        <label for="catalogue_check" class="cursor-pointer">Catalogue</label>
                                    </div>
                                </div>
                            </div>

                            <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>
                            {{-- end catalogue --}}

                            {{-- product gallery --}}
                            <div class="col-md-12 col-sm-12 mt-4">
                                <div class="form-group">
                                    <div class="icheck-primary d-inline">
                                        <input type="checkbox" name="gallery_check" id="gallery_check">
                                        <label for="gallery_check" class="cursor-pointer">Gallery</label>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12 col-sm-12" id="gallery_box">
                                                                <div class="p-3 ">
                                    <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>
                                                {{-- <button type="button" class="btn btn-outline-danger">
                                                    <i class="fas fa-trash"></i>
                                                </button> --}}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- end product gallery --}}

                        </div>
                        <br />
                        <div class="form-group">
                            <button type="submit" class="btn btn-dark">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>
    {{-- table js --}}
    {{-- <script src="{{asset('table/table.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', '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', 'manual_warranties_box', 'catalogue_box',
                'gallery_box'
            ].forEach(function(item) {
                $('#' + 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();
            });


            // product gallery
            $('#add_new_product_btn').on('click', function() {
                let id = Number(Math.random() * 5025 * Math.random()).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]);
                }
            });

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

            // 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();
            });


            // manual column new
            $('#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();
            });

            // 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_desc_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#medium_description').show();
                } else {
                    $('#medium_description').hide();
                }
            });
            // product specification
            $('#specifiaction_check').on('change', function() {
                if ($(this).is(':checked')) {
                    $('#specification_box').show();
                } else {
                    $('#specification_box').hide();
                }
            });

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

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

            // product manual
            $('#manual_warranties_check').on('change', function() {
                $('#manual_warranties_box').toggle();
            });

            $('#catalogue_check').on('change', function() {
                $("#catalogue_box").toggle();
            });

            $('#gallery_check').on('change', function() {
                $('#gallery_box').toggle();
            });
        });
    </script>
@endpush