@extends('main.layouts.app')
@section('content')

    <!-- Include Select2 CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />


    <style>
        .img-thumbs {
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            margin: 1.5rem 0;
            padding: 0.75rem;
        }

        .img-thumbs-hidden {
            display: none;
        }

        .wrapper-thumb {
            position: relative;
            display: inline-block;
            margin: 1rem 0;
            justify-content: space-around;
        }

        .img-preview-thumb {
            background: #fff;
            border: 1px solid none;
            border-radius: 0.25rem;
            box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
            margin-right: 1rem;
            max-width: 140px;
            padding: 0.25rem;
        }

        .remove-btn {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .7rem;
            top: -5px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        #croppie-modal,
        #og-croppie-modal {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
            background: white;
            padding: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #croppie-overlay,
        #og-croppie-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }



        .upload_image {
            width: 20px;
        }

        .upload-icon::before {
            content: "";
            display: inline-block;
            background: url("/images/upload_image.png") no-repeat;
            width: 25px;
            height: 20px;
            vertical-align: middle;
            background-size: contain;
        }

        .upload-icon {
            padding: .375rem .75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            text-align: left;
            /* color: #212529; */
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid #ced4da;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: .25rem;
            transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
            display: block;
            padding: 0.8rem .975rem;
            font-weight: 400;
            color: #0f1b2e;
            cursor: pointer;
            border: 1px solid #D9D9D9;

        }



        .btncrop {
            display: inline-block;
            cursor: pointer;
            position: relative;
            transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
            border-radius: 3px;
            font-size: 18px;
            font-weight: 600;
            padding: 5px 10px;
            color: #fff !important;
            z-index: 2;
            border: none;
            transition: all .5s ease;
            overflow: hidden;
            margin-bottom: 0;
            background: #0f1b2e;
        }


        .bg-yellow {
            background: #ffc966 !important;
        }

        .single_pr_price h2 {
            color: #0e194d;
        }

        .sub {
            display: flex;
            justify-content: space-between;
        }

        .sub h3 {
            font-size: 19px;
            line-height: 23px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .total {
            display: flex;
            justify-content: space-between;
            font-size: 28px;
            line-height: 35px;
            color: #1f365c;

        }

        .product_title {
            display: flex;
            align-items: center;
        }

        .h-300 {
            max-height: 300px;
            overflow-y: auto;
        }

        .proprice h3 {
            font-size: 26px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
            font-weight: bold;
        }

        .Quantity {
            width: 40%;
        }

        .title {
            padding: 10px;
        }

        .title h3 {
            font-size: 16px;
            line-height: 20px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .img-product-cover {
            width: 80px;
            height: 80px;
            padding: 10px;
            background-color: #0e194d;
        }

        img.cart-table-img {
            max-width: 100%;
        }


        /* The dots/bullets/indicators */

        /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }



        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {

            .prev,
            .next,
            .text {
                font-size: 11px
            }
        }


        .br-20 {
            border-radius: 20px;
        }

        .align-middle {
            vertical-align: middle;
        }

        div.clock {
            font-size: 26px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
            font-weight: bold;
        }

        .autopull-header h5 {
            font-size: 16px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .autopull-header h3 {
            font-size: 26px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
            font-weight: bold;
        }



        .card .card-header {
            width: 100%;
            min-height: 0px;
        }


        .card .card-header h4 {
            font-size: 16px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .bg_blue_color {
            border-radius: 20px !important;
            background-color: #0E194D !important;
        }

        .depo {
            font-size: 14px;
        }

        .dash-text {
            text-align: center;
        }

        .details-card .sub {
            /* font-size: 10px; */
            border-bottom: 1px dashed;
            padding: 5px 0;
        }


        .card .card-header h4 {
            font-size: 16px;
            line-height: 28px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .bg_blue_color {
            border-radius: 20px !important;
            background-color: #0E194D !important;
        }





        #banner_image {
            height: 48px;
        }

        #og_image {
            height: 48px;
        }


        i.fas.fa-fw.fa-store-alt {
            font-size: 24px;
        }

        .img-thumbs {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .wrapper-thumb {
            position: relative;
            width: 100px;
            /* Set the fixed width */
            height: 100px;
            /* Set the fixed height */
        }

        .img-preview-thumb {
            width: 100%;
            /* Ensure the image fills the wrapper */
            height: 100%;
            /* Ensure the image maintains the size */
            object-fit: cover;
            /* Ensure the image scales correctly */
        }

        .remove-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: rgba(255, 0, 0, 0.5);
            color: white;
            padding: 2px 5px;
            cursor: pointer;
            border-radius: 50%;
        }

        .remove-btn:hover {
            background-color: rgba(255, 0, 0, 0.7);
        }
    </style>
    <div class="main-content">
        <section class="section">


            <div class="section-header d-block bg_blue_color mb-0">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div class="dash-text">
                                    <h5 class="text-white depo mb-0">
                                        <a href="/"><img src="/img/homepage.png" alt="image"> </a>
                                        Add Products
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a class="/admin/products" href="dashboard"> Products </a>
                </li>
                <li class="breadcrumb-item">
                    <a class="" href="{{ route('admin.create-product') }}">Add Products</a>
                </li>
            </ol>


            <div class="section-body">
                {{-- <div class="row wrapper border-bottom white-bg page-heading"> --}}
                    <div class="row wrapper  white-bg page-heading">
                        <div class="col-sm-8">

                        </div>
                        <div class="col-sm-4">
                            <div class="title-action">
                                {{-- <a href="#"><button class='btn btn-info'> List Users</button></a> --}}
                            </div>
                        </div>
                    </div>
                    <div class="wrapper wrapper-content card">
                        <div class="animated fadeInUp card-body">
                       <form action="{{ route('admin.store-product') }}" method="post" enctype="multipart/form-data">
             @csrf

    {{-- Global error summary --}}
    @if ($errors->any())
        <div class="alert alert-danger">
            <strong>There were some problems with your input:</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- Product Title --}}
    <div class="form-group">
        <label>Product Title <span>*</span></label>
        <input type="text" name="product_title" class="form-control" value="{{ old('product_title') }}" required>
        @error('product_title')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Description --}}
    <div class="form-group">
        <label>Description <span>*</span></label>
        <textarea class="editor form-control" id="editor" name="description" >{{ old('description') }}</textarea>
        @error('description')
            <div class="text-danger mt-1">{{ $message }}</div>
        @enderror
    </div>

    {{-- Product URL --}}
    <div class="form-group">
        <label>Product URL <span>*</span></label>
        <input type="text" name="product_url" class="form-control" value="{{ old('product_url') }}"
               placeholder="Enter service URL" required>
        @error('product_url')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Category --}}
    <div class="form-group">
        <label>Select Category <span>*</span></label>
        <select name="category" class="form-control" required>
            <option value="">Select a category</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}"
                    {{ old('category') == $category->id ? 'selected' : '' }}>
                    {{ $category->category_name }}
                </option>
            @endforeach
        </select>
        @error('category')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Attributes --}}
    <div class="form-group">
        <label>Add Attributes <span>*</span></label>
        <select name="attributes[]" id="attributes" class="form-control" required multiple>
            @foreach ($attributes as $attribute)
                <option value="{{ $attribute->id }}"
                    {{ is_array(old('attributes')) && in_array($attribute->id, old('attributes')) ? 'selected' : '' }}>
                    {{ $attribute->name }}
                </option>
            @endforeach
        </select>
        @error('attributes')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- MRP / Price --}}
    <div class="form-group">
        <label>MRP Amount <span>*</span>(Including All Taxes*)</label>
        <input type="number" name="price" class="form-control" value="{{ old('price') }}"
               maxlength="20" required>
        @error('price')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Quantity --}}
    <div class="form-group">
        <label>Quantity <span>*</span></label>
        <input type="number" name="quantity" class="form-control" value="{{ old('quantity') }}"
               maxlength="20" required>
        @error('quantity')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Purchase, Sale & Profit --}}
    <div class="form-group row">
        <div class="col-4">
            <label>Purchase Amount <span>*</span>(Including All Taxes*)</label>
            <input type="number" id="purchase_price" name="purchase_price" class="form-control"
                   value="{{ old('purchase_price') }}" maxlength="20" required>
            @error('purchase_price')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-4">
            <label>Sale Amount <span>*</span>(Including All Taxes*)</label>
            <input type="number" id="sale_price" name="salse_price" class="form-control"
                   value="{{ old('salse_price') }}" maxlength="20" required>
            @error('salse_price')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-4">
            <label>Profit <span>*</span></label>
            <input type="number" id="profit" name="profit" class="form-control"
                   value="{{ old('profit') }}" maxlength="20" readonly required>
            @error('profit')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
    </div>

    {{-- HSN Code --}}
    <div class="form-group">
        <label>HSN Code</label>
        <input type="text" name="hsn_code" class="form-control" value="{{ old('hsn_code') }}"
               maxlength="20">
        @error('hsn_code')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Banner Images --}}
     <div>
                                    <label for="upload-img" class="form-label">Banner Images</label>
                                    <input class="form-control form-control-sm" name="banner_image[]" id="upload-img"
                                        type="file" multiple required>
                                    <div class="img-thumbs" id="img-preview"></div>

                                    <!-- Hidden input field to store comma-separated links -->
                                    <input type="hidden" id="image-links" name="image_links">
                                </div>

                                <div id="dynamic-inputs"></div>


    {{-- Sub-services --}}
    <div class="form-group">
        <label>Sub-Services</label>
        <select name="sub_services[]" multiple class="form-control h-75">
            @foreach ($products as $sub)
                <option value="{{ $sub['product_title'] }}"
                    {{ is_array(old('sub_services')) && in_array($sub['product_title'], old('sub_services')) ? 'selected' : '' }}>
                    {{ $sub['product_title'] }}
                </option>
            @endforeach
        </select>
        @error('sub_services')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Meta Details --}}
    <fieldset class="border p-2">
        <legend class="text-center">Meta Details</legend>
        <div class="form-group">
            <label>Meta Title <span>*</span></label>
            <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title') }}" required>
            @error('meta_title')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="form-group">
            <label>Meta Description <span>*</span></label>
            <input type="text" name="meta_desc" class="form-control" value="{{ old('meta_desc') }}" required>
            @error('meta_desc')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="form-group">
            <label>Meta Keywords <span>*</span></label>
            <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords') }}" required>
            @error('meta_keywords')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
    </fieldset>

    {{-- OG Details --}}
    <fieldset class="border p-2 mt-3">
        <legend class="text-center">OG Details</legend>
        <div class="form-group">
            <label>OG Title <span>*</span></label>
            <input type="text" name="og_title" class="form-control" value="{{ old('og_title') }}" required>
            @error('og_title')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="form-group">
            <label>OG Description <span>*</span></label>
            <input type="text" name="og_desc" class="form-control" value="{{ old('og_desc') }}" required>
            @error('og_desc')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="form-group">
            <label>OG Image <span>*</span></label>
            <input type="file" name="og_image" id="og-upload" class="form-control" accept="image/*" required>
            @error('og_image')
                <div class="text-danger">{{ $message }}</div>
            @enderror
        </div>
    </fieldset>

    <button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>

                        </div>
                    </div>
                </div>
        </section>
    </div>

    {{--
    <script type="text/javascript" src="/js/ckfinder/ckfinder.js"></script>
    <script>
        CKFinder.config({
            connectorPath: '/ckfinder/connector'
        });
    </script> --}}

    {{--
    <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script> --}}
    {{--
    <script src="https://cdn.ckeditor.com/4.25.0-lts/standard/ckeditor.js"></script> --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
    <script src="{{asset('js/ckeditor.js')}}"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->

    <!-- Include Select2 CSS and JS -->
    <<!-- Include jQuery and Select2 JS -->
       
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

        <!-- Initialize Select2 -->
        <script>
            $(document).ready(function () {
                $('#attributes').select2({
                    placeholder: 'Select Attributes',
                    allowClear: true
                });
            });
        </script>


        <script>


            var imgUpload = document.getElementById('upload-img'),
                imgPreview = document.getElementById('img-preview'),
                imageLinksField = document.getElementById('image-links');

            imgUpload.addEventListener('change', function (event) {
                var totalFiles = imgUpload.files.length;
                var imageLinks = [];

                // Clear any existing preview
                imgPreview.innerHTML = '';

                // Process the selected files
                for (var i = 0; i < totalFiles; i++) {
                    var file = event.target.files[i];
                    var fileURL = URL.createObjectURL(file); // Create a unique URL for each file

                    var wrapper = document.createElement('div');
                    wrapper.classList.add('wrapper-thumb');

                    var removeBtn = document.createElement("span");
                    removeBtn.classList.add('remove-btn');
                    removeBtn.textContent = 'x';

                    var img = document.createElement('img');
                    img.src = fileURL; // Use the unique URL for the image
                    img.classList.add('img-preview-thumb');

                    wrapper.appendChild(img);
                    wrapper.appendChild(removeBtn);
                    imgPreview.appendChild(wrapper);

                    // Add image file URL to the imageLinks array
                    imageLinks.push(fileURL);

                    // Remove the image preview on clicking 'x'
                    removeBtn.addEventListener('click', function () {
                        // Remove the image from the preview
                        this.parentNode.remove();

                        // Update the imageLinks array and the hidden input field
                        updateImageLinks();
                        // Revoke the object URL to free up memory
                        URL.revokeObjectURL(fileURL);
                    });
                }

                // Update the hidden input field with comma-separated image links
                updateImageLinks();

                function updateImageLinks() {
                    // Clear the current imageLinks array
                    imageLinks = [];

                    // Rebuild the imageLinks array based on current previews
                    var currentImages = imgPreview.getElementsByTagName('img');
                    for (var j = 0; j < currentImages.length; j++) {
                        imageLinks.push(currentImages[j].src);
                    }

                    // Update the hidden input field with comma-separated image links
                    imageLinksField.value = imageLinks.join(',');
                }
            });




        </script>
        <!-- jQuery -->
        <script>
            var imgUpload = document.getElementById('upload-img'),
                imgPreview = document.getElementById('img-preview'),
                imageLinksField = document.getElementById('image-links'),
                dynamicInputs = document.getElementById('dynamic-inputs');

            imgUpload.addEventListener('change', function (event) {
                var totalFiles = imgUpload.files.length;
                var imageLinks = [];

                // Clear any existing preview and dynamic inputs
                imgPreview.innerHTML = '';
                dynamicInputs.innerHTML = '';

                // Process the selected files
                for (var i = 0; i < totalFiles; i++) {
                    var file = event.target.files[i];
                    var fileURL = URL.createObjectURL(file); // Create a unique URL for each file

                    var wrapper = document.createElement('div');
                    wrapper.classList.add('wrapper-thumb');

                    var removeBtn = document.createElement("span");
                    removeBtn.classList.add('remove-btn');
                    removeBtn.textContent = 'x';

                    var img = document.createElement('img');
                    img.src = fileURL; // Use the unique URL for the image
                    img.classList.add('img-preview-thumb');

                    wrapper.appendChild(img);
                    wrapper.appendChild(removeBtn);
                    imgPreview.appendChild(wrapper);

                    // Add image file URL to the imageLinks array
                    imageLinks.push(fileURL);

                    // Create a dynamic input field for each image
                    var inputField = document.createElement('input');
                    inputField.type = 'text';
                    inputField.name = 'image_description[]'; // Use an array to collect descriptions
                    inputField.placeholder = 'Description for image ' + (i + 1);
                    dynamicInputs.appendChild(inputField);

                    // Remove the image preview and input field on clicking 'x'
                    removeBtn.addEventListener('click', function () {
                        // Remove the image from the preview
                        this.parentNode.remove();
                        // Remove the corresponding input field
                        inputField.remove();

                        // Update the imageLinks array and the hidden input field
                        updateImageLinks();
                        // Revoke the object URL to free up memory
                        URL.revokeObjectURL(fileURL);
                    });
                }

                // Update the hidden input field with comma-separated image links
                updateImageLinks();

                function updateImageLinks() {
                    // Clear the current imageLinks array
                    imageLinks = [];

                    // Rebuild the imageLinks array based on current previews
                    var currentImages = imgPreview.getElementsByTagName('img');
                    for (var j = 0; j < currentImages.length; j++) {
                        imageLinks.push(currentImages[j].src);
                    }

                    // Update the hidden input field with comma-separated image links
                    imageLinksField.value = imageLinks.join(',');
                }
            });
              document.addEventListener('DOMContentLoaded', function () {
        function calculateProfit() {
            const purchase = parseFloat(document.getElementById("purchase_price").value) || 0;
            const sale = parseFloat(document.getElementById("sale_price").value) || 0;
            const profit = sale - purchase;
            document.getElementById('profit').value = profit.toFixed(2);
        }

        document.getElementById('purchase_price').addEventListener('input', calculateProfit);
        document.getElementById('sale_price').addEventListener('input', calculateProfit);
    });
          
        </script>

@endsection