@extends('layouts.main')

@section('content')
<style>
    /* Hide up and down cursor for number input */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    .image-container {
        position: relative;
        display: inline-block;
    }

    .download-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px;
        border-radius: 10%;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    /* Make download button always visible on mobile */
    @media (max-width: 768px) {
        .download-btn {
            opacity: 1;
        }
    }

    /* Keep hover effect only on desktop */
    @media (min-width: 769px) {
        .image-container:hover .download-btn {
            opacity: 1;
        }
    }

    /* Swiper navigation arrows */
    .swiper-button-next,
    .swiper-button-prev {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 20px;
        border-radius: 50%;
        color: white !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 16px !important;
    }

    @media (max-width: 768px) {

        .swiper-button-next,
        .swiper-button-prev {
            padding: 15px;
        }
    }

    /* Thumbnail navigation arrows */
    .product-nav-slider .swiper-button-next,
    .product-nav-slider .swiper-button-prev {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 15px;
        border-radius: 50%;
        color: white !important;
    }

    .product-nav-slider .swiper-button-next:after,
    .product-nav-slider .swiper-button-prev:after {
        font-size: 12px !important;
    }
</style>
@include('components.message')
@if(isset($any_error))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ $any_error }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<form action="{{ route('home.order-store', ['id'=>$id]) }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="product-img-slider sticky-side-div">
                                <!-- Main Image -->
                                <div class="swiper product-thumbnail-slider p-2 rounded bg-light mb-3">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="image-container">
                                                <img src="{{ asset($product->photo) }}" alt="" class="img-fluid d-block main-product-image" />
                                                <a href="{{ asset($product->photo) }}" download class="download-btn" title="Download Image">
                                                    <i class="ri-download-2-line fs-16"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Add Navigation -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>

                                <!-- Thumbnails -->
                                <div class="swiper product-nav-slider mt-2">
                                    <div class="swiper-wrapper">

                                        @if(isset($product->photos))
                                        @foreach(json_decode($product->photos, true) as $photo)
                                        <div class="swiper-slide">
                                            <div class="nav-slide-item" data-image="{{ asset($photo) }}">
                                                <img src="{{ asset($photo) }}" alt="" class="img-fluid d-block" />
                                            </div>
                                        </div>
                                        @endforeach
                                        @else
                                        <div class="swiper-slide">
                                            <div class="nav-slide-item" data-image="{{ asset($product->photo) }}">
                                                <img src="{{ asset($product->photo) }}" alt="" class="img-fluid d-block" />
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <!-- Add Navigation for thumbnails -->
                                    <div class="swiper-button-next"></div>
                                    <div class="swiper-button-prev"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="mt-xl-0 mt-1">
                                <div class="d-flex">
                                    <div class="flex-grow-1">
                                        <h5 id="product_name">{{ $product->name ?? '-' }}</h5>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-xl-12">
                                        <table style="width: 100%;text-wrap:wrap!important;" class="table mb-0">
                                            <tr>
                                                <td width="30%">Harga</td>
                                                <input type="hidden" name="sell_price" value="{{ $product->sell_price }}" />
                                                <td class="text-primary">Rp. {{ number_format($product->sell_price) ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td width="30%">Deskripsi</td>
                                                <td>{{ $product->description ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td width="30%">Dimensi (P x L x T)</td>
                                                <td>{{ $dimension['length'] .'cm x '. $dimension['width'] .'cm x '. $dimension['height'].'cm'}}</td>
                                            </tr>
                                            <tr>
                                                <td width="30%">Berat</td>
                                                <td>{{ $dimension['weight'] }}Kg</td>
                                            </tr>
                                            @php
                                            $variants = json_decode($product->variants, true) ?? [];
                                            @endphp
                                            @if(isset($variants) && !empty($variants['key_varian']))
                                                                                        @endif
                                            <tr>
                                                <td width="30%">Min.Order</td>
                                                <td>{{ $product->minimum_order ?? '-' }}</td>
                                            </tr>
                                            <tr>
                                                <td>Qty</td>
                                                <td>
                                                    <div class="input-step">
                                                        <button type="button" class="minus material-shadow">–</button>
                                                        <input type="number" class="product-quantity" value="{{ $product->minimum_order }}" min="{{ $product->minimum_order }}" max="{{ $product->stock }}" name="quantity" readonly />
                                                        <button type="button" class="plus material-shadow">+</button>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Brand Anda</td>
                                                <td>
                                                    @if(count($bisnis)>0)
                                                    <select class="form-control" name="bisnis_reseller_id" id="bisnis_reseller_id" required>
                                                        <option value="">Pilih Brand</option>
                                                        @if(isset($bisnis))
                                                        @foreach($bisnis as $k => $v)
                                                        <option value="{{ $v->id }}" data-image="{{ asset($v->logo ?? 'assets/images/no-image.jpg') }}">{{ $v->name }}</option>
                                                        @endforeach
                                                        @endif
                                                    </select>
                                                    <div class="mt-2" id="business-preview" style="display: none;">
                                                        <div class="position-relative">
                                                            <img id="preview-image" src="" alt="Business Logo" class="img-fluid" style="max-height: 190px;">
                                                            <div class="position-absolute top-0 end-0" style="margin: 5px;">
                                                                <button type="button" class="btn btn-sm btn-info" id="edit-logo-btn" style="padding: 0.25rem 0.5rem;">
                                                                    <i class="ri-edit-2-line"></i> Ubah Logo
                                                                </button>
                                                            </div>
                                                        </div>
                                                        <input type="file" id="logo-input" name="bisnis_reseller_photo" class="d-none" accept="image/*">
                                                        <input type="hidden" id="logo-changed" name="logo_changed" value="0">
                                                    </div>
                                                    @else
                                                    <p>Buat bisnis anda terlebih dahulu ke menu <i class="fw-bold">Bisnis Anda</i> atau <a href="{{ route('bisnis.profile') }}">klik link disini</a></p>
                                                    @endif
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>Catatan (Opsional)</td>
                                                <td>
                                                    <textarea class="form-control" name="note" id="note" rows="4" placeholder="Contoh: Tolong dikemas terpisah, dan ditambahkan bublewrap">{{ $data->note ?? old('note') }}</textarea>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <!-- end row -->
                            </div>
                        </div>
                    </div>
                    <!-- end row -->
                </div>
                <!-- end card body -->
            </div>
            <!-- end card -->
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label" for="shipping_name">Nama Penerima</label>
                        <input name="shipping_name" type="text" class="form-control" id="shipping_name" placeholder="cth: Michelle Wijaya" value="{{ $data->shipping_name  ?? old('shipping_name') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="shipping_phone">Nomor Telepon</label>
                        <input name="shipping_phone" type="text" class="form-control" id="shipping_phone" placeholder="cth: 08123456789" value="{{ $data->shipping_phone  ?? old('shipping_phone') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label" for="meta-title-input">Alamat Penerima</label>
                        <textarea class="form-control" name="shipping_address" id="shipping_address" rows="4" placeholder="Contoh : Jalan Raya Ruko Pulau Gadung - Jakarta Utara">{{ $data->shipping_address  ?? old('shipping_address') }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label for="province_id" class="form-label">Provinsi</label>
                        <input type="hidden" name="province_name" id="province_name" value="{{ $data->province_name ?? old('province_name') }}" />
                        <select class="form-control shipping-regular" id="province_id" name="province_id">
                            <option value="">Pilih Provinsi</option>
                            @if(isset($ms_provinces))
                            @foreach($ms_provinces as $x)
                            <option value="{{ $x['id'] }}"