@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="{{ route('products.edit',$product->id) }}"><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 href="{{ route('products.index') }}">Products</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('products.edit', $product->id) }}">Edit Product</a>
            </li>
        </ol>

        <div class="section-body">
            <div class="wrapper white-bg page-heading">
                <div class="row">
                    <div class="col-sm-8">
                        <!-- Optional: Additional heading or description -->
                    </div>
                    <div class="col-sm-4">
                        <div class="title-action">
                            <!-- Optional: Action buttons -->
                        </div>
                    </div>
                </div>
            </div>

            <div class="wrapper-content card">
                <div class="animated fadeInUp card-body">
                    <form action="{{ route('products.update', $product->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- 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->product_title) }}" required>
                        </div>

                        <!-- Description -->
                        <div class="form-group">
                            <label>Description</label>
                            <textarea class="editor" id="editor" name="description">{{ old('description', $product->description) }}</textarea>
                        </div>

                        <!-- Product URL -->
                        <div class="form-group">
                            <label for="product_url">Product URL <span>*</span></label>
                            <input type="text" class="form-control" name="product_url" value="{{ old('product_url', $product->product_url) }}" required>
                        </div>

                        <!-- Select Category -->
                        <div class="form-group">
                            <label>Select Category <span>*</span></label>
                            <select required class="form-control" id="category" name="category">
                                <option value="">Select a Category</option>
                                <option value="1" {{ $product->category == 1 ? 'selected' : '' }}>Category 1</option>
                                <option value="2" {{ $product->category == 2 ? 'selected' : '' }}>Category 2</option>
                                <!-- Add more categories as needed -->
                            </select>
                        </div>

                        <!-- Banner Image -->
                        <div class="mb-3">
                            <label for="images" class="form-label">Banner Image</label>
                            <input class="form-control" name="images" id="images" type="file">
                            @if($product->images)
                                <img src="{{ asset('storage/' . $product->images) }}" alt="current image" style="width: 100px;">
                            @endif
                        </div>

                        <!-- Price -->
                        <div class="form-group">
                            <label for="price">Price <span>*</span> (Including All Taxes*)</label>
                            <input type="number" name="price" class="form-control" value="{{ old('price', $product->price) }}" maxlength="20" required>
                        </div>

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

                        <!-- Meta Details -->
                        <fieldset class="border p-2">
                            <legend class="float-none w-auto p-2 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', $product->meta_title) }}" required>
                            </div>

                            <div class="form-group">
                                <label>Meta Description <span>*</span></label>
                                <input class="form-control" type="text" name="meta_desc" value="{{ old('meta_desc', $product->meta_desc) }}" required>
                            </div>

                            <div class="mb-3">
                                <label for="meta_image" class="form-label">Meta Image</label>
                                <input class="form-control" name="meta_image" id="meta_image" type="file">
                                @if($product->meta_image)
                                    <img src="{{ asset('storage/' . $product->meta_image) }}" alt="Meta image" style="width: 100px;">
                                @endif
                            </div>
                        </fieldset>

                        <!-- OG Details -->
                        <fieldset class="border p-2">
                            <legend class="float-none w-auto p-2 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', $product->og_title) }}" required>
                            </div>

                            <div class="form-group">
                                <label>OG Description <span>*</span></label>
                                <input class="form-control" type="text" name="og_desc" value="{{ old('og_desc', $product->og_desc) }}" required>
                            </div>

                            <div class="mb-3">
                                <label for="og_image" class="form-label">OG Image</label>
                                <input class="form-control" name="og_image" id="og_image" type="file">
                                @if($product->og_image)
                                    <img src="{{ asset('storage/' . $product->og_image) }}" alt="OG image" style="width: 100px;">
                                @endif
                            </div>
                        </fieldset>

                        <!-- Submit Button -->
                        <input style="margin:10px" type="submit" class="btn btn-primary" value="Update Product">
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection