@extends('main.layouts.app')
@section('content')
    <style>
        #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;
        }

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

        #banner_image {
            height: 48px;
        }

        #og_image {
            height: 48px;
        }
    </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>
                                        Edit Product
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




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



            <div class="section-body card">
                {{-- <div class="row wrapper border-bottom white-bg page-heading"> --}}
                <div class="wrapper wrapper-content card-body">
                    <div class="animated fadeInUp">
                   <form method="POST" action="{{ route('products.update',  $product_details->id) }}" enctype="multipart/form-data">

    @csrf
    <input type="hidden" name="table_id" value="{{ $product_details->id }}" />

    @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', $product_details->product_title) }}" required>
        @error('product_title')
            <div class="text-danger">{{ $message }}</div>
        @enderror
    </div>

    {{-- Description --}}
    <div class="form-group">
        <label>Description</label>
        <textarea class="editor form-control" id="editor" name="description">{{ old('description', $product_details->description) }}</textarea>
        @error('description')
            <div class="text-danger">{{ $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', $product_details->product_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 ($category_data as $item)
            <option value="{{ $item->id }}" {{ old('category', $product_details->category) == $item->id ? 'selected' : '' }}>
                {{ $item->category_name }}
            </option>
        @endforeach
    </select>
    @error('category')
        <div class="text-danger">{{ $message }}</div>
    @enderror
</div>


    {{-- Attributes --}}
    <div class="form-group">
        <label>Attributes</label>
     @php
    $selectedAttributes = old('attributes', isset($product_details->attributes) ? explode(',', $product_details->attributes) : []);
@endphp

<select name="attributes[]" class="form-control" multiple>
    @foreach ($attributes as $attribute)
        <option value="{{ $attribute->id }}"
            {{ in_array($attribute->id, $selectedAttributes) ? 'selected' : '' }}>
            {{ $attribute->name }}
        </option>
    @endforeach
</select>

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

    @error('price')
        <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></label>
            <input type="number" id="purchase_price" name="purchase_price" class="form-control" value="{{ old('purchase_price', $product_details->purchase_price) }}" required>
        </div>

        <div class="col-4">
            <label>Sale Amount <span>*</span></label>
            <input type="number" id="sale_price" name="salse_price" class="form-control" value="{{ old('salse_price', $product_details->salse_price) }}" required>
        </div>

        <div class="col-4">
            <label>Profit <span>*</span></label>
            <input type="number" id="profit" name="profit" class="form-control" value="{{ old('profit', $product_details->profit) }}" readonly required>
        </div>
    </div>

    {{-- Quantity --}}
    <div class="form-group">
        <label>Quantity <span>*</span></label>
        <input type="number" name="quantity" class="form-control" value="{{ old('quantity', $product_details->quantity) }}" required>
    </div>

    {{-- HSN Code --}}
    <div class="form-group">
        <label>HSN Code</label>
        <input type="text" name="hsn_code" class="form-control" value="{{ old('hsn_code', $product_details->hsn_code) }}">
    </div>

    {{-- Banner Image --}}
    <div class="form-group mb-3">
        <label>Banner Image</label>
        <input type="file" name="banner_image" class="form-control" accept="image/*">
        @if($product_details->images)
            <img src="{{ $product_details->images }}" width="200" alt="Banner Image">
        @endif
    </div>

    {{-- Sub-services --}}
    <div class="form-group">
        <label>Sub-Services</label>
        <select name="sub_services[]" multiple class="form-control">
            @foreach ($products as $sub)
                <option value="{{ $sub['product_title'] }}"
                    {{ in_array($sub['product_title'], old('sub_services', explode(',', $product_details->sub_services ?? ''))) ? 'selected' : '' }}>
                    {{ $sub['product_title'] }}
                </option>
            @endforeach
        </select>
    </div>

    {{-- Meta Details --}}
    <fieldset class="border p-2">
        <legend class="text-center">Meta Details</legend>
        <div class="form-group">
            <label>Meta Title</label>
            <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title', $product_details->meta_title) }}" required>
        </div>
        <div class="form-group">
            <label>Meta Description</label>
            <input type="text" name="meta_desc" class="form-control" value="{{ old('meta_desc', $product_details->meta_desc) }}" required>
        </div>
        <div class="form-group">
            <label>Meta Keywords</label>
            <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords', $product_details->meta_keywords) }}" required>
        </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</label>
            <input type="text" name="og_title" class="form-control" value="{{ old('og_title', $product_details->og_title) }}" required>
        </div>
        <div class="form-group">
            <label>OG Description</label>
            <input type="text" name="og_desc" class="form-control" value="{{ old('og_desc', $product_details->og_desc) }}" required>
        </div>
        <div class="form-group mb-3">
            <label>OG Image</label>
            <input type="file" name="og_image" class="form-control" accept="image/*">
            @if($product_details->og_image)
                <img src="{{ $product_details->og_image }}" width="200" alt="OG Image">
            @endif
        </div>
    </fieldset>

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




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



    {{-- @include('ckfinder::setup') --}}
    <style>
        /* .ck-content ul li{ list-style-position: inside; }
         .ck-content {color:#000;}
         .ck.ck-editor__top.ck-reset_all { position:absolute !important; top:0px !important; width:100% !important; z-index:999;  }
            .ck.ck-editor__main { height:600px !important; overflow-y:scroll !important; padding-top:40px; }
            main .content-container  { overflow-x: hidden; color:black;}
            main .ck.ck-content { min-height:600px !important; }

            .blog_after_crop  { height:250px !important; margin-bottom:12px !important; }
            .ck-content a {text-decoration: underline;} */
    </style>

    <script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
    <script src="{{asset('js/ckeditor.js')}}"></script>


    <script>
        $(document).ready(function() {
            var $croppieContainer = $('#croppie-container');
            var $uploadButton = $('#upload-button');
            var $upload = $('#upload');
            var $saveCropped = $('#save-cropped');
            var $cancelCroppie = $('#cancel-croppie');
            var $croppieOverlay = $('#croppie-overlay');
            var $croppieModal = $('#croppie-modal');
            var $croppedImageInput = $('#cropped-image');
            var croppieInstance;
            var fileName; // Variable to store file name

            var $ogCroppieContainer = $('#og-croppie-container');
            var $ogUploadButton = $('#og-upload-button');
            var $ogUpload = $('#og-upload');
            var $ogSaveCropped = $('#og-save-cropped');
            var $ogCancelCroppie = $('#og-cancel-croppie');
            var $ogCroppieOverlay = $('#og-croppie-overlay');
            var $ogCroppieModal = $('#og-croppie-modal');
            var $ogCroppedImageInput = $('#og-cropped-image');
            var ogCroppieInstance;

            function initializeCroppie(container, instanceVar, overlay, modal, croppedImageInput, saveButton,
                cancelButton) {
                if (instanceVar) {
                    instanceVar.destroy();
                }

                instanceVar = new Croppie(container[0], {
                    viewport: {
                        width: 200,
                        height: 200,
                        type: 'circle'
                    }, // Round cropper
                    boundary: {
                        width: 300,
                        height: 300
                    },
                    showZoomer: true,
                    enableResize: true,
                    enableOrientation: true,
                    minZoom: 0.05,
                    maxZoom: 3,
                    enforceBoundary: false
                });

                return instanceVar;
            }

            $uploadButton.on('click', function() {
                $upload.click();
            });

            $upload.on('change', function(event) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $croppieModal.show();
                    $croppieOverlay.show();

                    croppieInstance = initializeCroppie($croppieContainer, croppieInstance,
                        $croppieOverlay, $croppieModal, $croppedImageInput, $saveCropped,
                        $cancelCroppie);

                    croppieInstance.bind({
                        url: e.target.result
                    }).then(function() {
                        croppieInstance.setZoom(0.5);
                        var $zoomer = $('.cr-slider');
                        $zoomer.attr('min', 0.05);
                        $zoomer.attr('max', 3);
                        $zoomer.attr('step', 0.01);
                    });

                    fileName = event.target.files[0].name;
                };

                reader.readAsDataURL(event.target.files[0]);
            });

            $saveCropped.on('click', function() {
                if (croppieInstance) {
                    croppieInstance.result({
                        type: 'base64',
                        size: 'viewport'
                    }).then(function(base64) {
                        $croppedImageInput.val(base64);
                        $croppieModal.hide();
                        $croppieOverlay.hide();
                        $uploadButton.text(fileName);
                    });
                }
            });

            $cancelCroppie.on('click', function() {
                $croppieModal.hide();
                $croppieOverlay.hide();
                if (croppieInstance) {
                    croppieInstance.destroy();
                    croppieInstance = null;
                }
            });

            $ogUploadButton.on('click', function() {
                $ogUpload.click();
            });

            $ogUpload.on('change', function(event) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $ogCroppieModal.show();
                    $ogCroppieOverlay.show();

                    ogCroppieInstance = initializeCroppie($ogCroppieContainer, ogCroppieInstance,
                        $ogCroppieOverlay, $ogCroppieModal, $ogCroppedImageInput, $ogSaveCropped,
                        $ogCancelCroppie);

                    ogCroppieInstance.bind({
                        url: e.target.result
                    }).then(function() {
                        ogCroppieInstance.setZoom(0.5);
                        var $zoomer = $('.cr-slider');
                        $zoomer.attr('min', 0.05);
                        $zoomer.attr('max', 3);
                        $zoomer.attr('step', 0.01);
                    });

                    fileName = event.target.files[0].name;
                };

                reader.readAsDataURL(event.target.files[0]);
            });

            $ogSaveCropped.on('click', function() {
                if (ogCroppieInstance) {
                    ogCroppieInstance.result({
                        type: 'base64',
                        size: 'viewport'
                    }).then(function(base64) {
                        $ogCroppedImageInput.val(base64);
                        $ogCroppieModal.hide();
                        $ogCroppieOverlay.hide();
                        $ogUploadButton.text(fileName);
                    });
                }
            });

            $ogCancelCroppie.on('click', function() {
                $ogCroppieModal.hide();
                $ogCroppieOverlay.hide();
                if (ogCroppieInstance) {
                    ogCroppieInstance.destroy();
                    ogCroppieInstance = null;
                }
            });
        });

       function calculateProfit(){

        const purchase = parseFloat(document.getElementById("purchase_price").value || 0);
        const salse = parseFloat(document.getElementById("sale_price").value || 0);
        const profit = salse - purchase;
        
        document.getElementById('profit').value = profit.toFixed(2);
    }


    document.getElementById('purchase_price').addEventListener('input' , calculateProfit);

    document.getElementById('sale_price').addEventListener('input' , calculateProfit);



    
    </script>
    {{-- <script src="https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js"></script> --}}
@endsection