@extends('main.layouts.app')

@section('content')
    <div class="page-header">
        <h1 class="page-title">Edit Variant</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="dashboard">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.show-variants', $variant->product_id) }}">Variants</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit Variant</li>
        </ol>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-lg- mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Edit Variant</h3>
                    </div>
                    <div class="card-body">
                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif


                        <form action="{{ route('variant-update', $variant->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-3">

                                <div class="col-md-4">
                                    <label>MRP Price</label>
                                    <input type="number" name="mrp_price" step="0.01" class="form-control" required
                                        value="{{ $variant->mrp_price }}">
                                </div>

                                <div class="col-md-4">
                                    <label>Sale Price</label>
                                    <input type="number" name="price" step="0.01" class="form-control" required
                                        value="{{ $variant->price }}">
                                </div>

                                <div class="col-md-4">
                                    <label>Stock</label>
                                    <input type="number" name="stock" class="form-control" required
                                        value="{{ $variant->stock }}">
                                </div>

                                {{-- multiple images --}}
                                <div class="mb-3 col-md-12">
                                    <label for="formFileSm" class="form-label">Choose Images*(1200px × 800px, File size must
                                        be less than 1MB)</label>
                                    <input class="form-control form-control-sm" name="image[]" id="upload-img"
                                        type="file" multiple accept="image/*">

                                    @php
                                        $pictures = !empty($variant->image) ? explode('||', $variant->image) : [];
                                    @endphp
                                    @if (!empty($pictures))
                                        @foreach ($pictures as $pics)
                                            <img src="{{ $pics }}" style="width: 200px;" alt="OG Image" />
                                        @endforeach
                                    @else
                                        <p>No Images Found</p>
                                    @endif
                                </div>
                                {{-- end multiple image --}}
                            </div>


                            <div class="row">
                                <div class="mb-4 col-md-12">
                                    <label class="block text-slate-700 font-medium">Apply GST?</label>
                                    <div class="flex space-x-4 mt-2">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="apply_gst" value="no"
                                                class="form-radio text-blue-600"
                                                onclick="document.getElementById('gst-field').style.display='none'"
                                                {{ empty($variant->gst) ? 'checked' : '' }}>
                                            <span class="ml-2">No</span>
                                        </label>

                                        <label class="inline-flex items-center">
                                            <input type="radio" name="apply_gst" value="yes"
                                                class="form-radio text-blue-600"
                                                onclick="document.getElementById('gst-field').style.display='block'"
                                                {{ !empty($variant->gst) ? 'checked' : '' }}>
                                            <span class="ml-2">Yes</span>
                                        </label>
                                    </div>
                                </div>

                                <div id="gst-field" class="mt-3"
                                    style="{{ !empty($variant->gst) ? '' : 'display: none;' }}">
                                    <label for="gst">GST (%)</label>
                                    <input type="number" name="gst" id="gst" class="form-control form-control-sm"
                                        value="{{ $variant->gst }}" placeholder="Enter GST %">
                                </div>
                                
                            </div>

                            <div class="row">
                                @foreach ($mapping as $index => $mapp)
                                    <div class="col-md-4 mb-3">
                                        <input type="hidden" name="attributes[{{ $index }}][attribute_id]"
                                            value="{{ $mapp->attribute_id }}">
                                        <label>{{ $mapp->name }}</label>
                                        <select name="attributes[{{ $index }}][value_id]" class="form-control">
                                            <option value="">Select {{ $mapp->name }}</option>
                                            @foreach ($mapp->values as $value)
                                                <option value="{{ $value->id }}"
                                                    {{ $mapp->attribute_value_id == $value->id ? 'selected' : '' }}>
                                                    {{ $value->value }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                @endforeach
                            </div>


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



                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection



<script>
    document.addEventListener("DOMContentLoaded", function() {
        const price = document.querySelector("input[name='price']");
        const afterDiscount = document.querySelector("input[name='after_discount']");
        const discountInput = document.querySelector("input[name='discount']");
        const gstInput = document.querySelector("input[name='gst']");

        discountInput.addEventListener("input", function() {
            let discountPrice = parseFloat(discountInput.value) || 0;
            let gstRate = 18; // Assuming 18% GST
            let priceValue = parseFloat(price.value) || 0;

            let discountedPrice = priceValue - discountPrice; // Calculating discounted price
            afterDiscount.value = discountedPrice.toFixed(2);

            let gstAmount = (discountedPrice * gstRate) / 100;

            gstInput.value = gstAmount.toFixed(2);
        });
    });
</script>