@extends('backEnd.layouts.master')
@section('title', 'Product Create')

@section('css')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">

    <style>
        .card {
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
            border: none;
            margin-bottom: 25px;
        }

        .section-title {
            background: #f8f9fa;
            padding: 12px;
            border-left: 4px solid #727cf5;
            margin-bottom: 20px;
            font-weight: bold;
            border-radius: 0 5px 5px 0;
        }

        .form-label {
            font-weight: 600;
            color: #444;
            font-size: 0.9rem;
        }

        /* Image Preview Style */
        .image-preview-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }

        .preview-box {
            width: 100px;
            height: 100px;
            border: 2px dashed #ddd;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            background: #f9f9f9;
        }

        .preview-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Attribute Badges */
        .attr-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            background: #fafafa;
        }

        .form-check-label {
            cursor: pointer;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 mt-3">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="page-title">Product Create</h4>
                    <a href="{{route('products.index')}}" class="btn btn-primary rounded-pill px-4 shadow-sm">
                        <i class="fa fa-list me-1"></i> Manage Products
                    </a>
                </div>
            </div>
        </div>

        <form action="{{route('products.store')}}" method="POST" id="productForm" enctype="multipart/form-data">
            @csrf
            <div class="row">
                {{-- Left Side --}}
                <div class="col-lg-8">
                    {{-- Basic Info --}}
                    <div class="card">
                        <div class="card-body">
                            <div class="section-title">General Information</div>
                            <div class="mb-3">
                                <label class="form-label">Product Name *</label>
                                <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                    value="{{ old('name') }}" required placeholder="Enter Product Name" />
                                @error('name') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>

                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Category *</label>
                                    <select class="form-control select2" name="category_id" id="category_id" required>
                                        <option value="">Select Category</option>
                                        @foreach($categories as $category)
                                            <option value="{{$category->id}}">{{$category->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('category_id') <span class="text-danger small">{{ $message }}</span> @enderror

                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Sub Category</label>
                                    <select class="form-control select2" id="subcategory_id" name="subcategory_id">
                                        <option value="">Select SubCategory</option>
                                    </select>
                                    @error('subcategory_id') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Child Category</label>
                                    <select class="form-control select2" id="childcategory_id" name="childcategory_id">
                                        <option value="">Select Child Category</option>
                                    </select>
                                    @error('childcategory_id') <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Brand</label>
                                    <select class="form-control select2" name="brand_id">
                                        <option value="">Select Brand</option>
                                        @foreach($brands as $value)
                                            <option value="{{$value->id}}">{{$value->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('brand_id') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Product Unit (Optional)</label>
                                    <input type="text" name="pro_unit" class="form-control" placeholder="e.g. kg, pc, box"
                                        value="{{ old('pro_unit') }}" />
                                    @error('pro_unit') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Video URL (Optional)</label>
                                <input type="text" name="pro_video" class="form-control" placeholder="YouTube or Video Link"
                                    value="{{ old('pro_video') }}" />
                                @error('pro_video') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Full Description *</label>
                                <textarea name="description" id="summernote"
                                    class="form-control">{{ old('description') }}</textarea>
                                @error('description') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Dynamic Images --}}
                    <div class="card">
                        <div class="card-body">
                            <div class="section-title">Product Gallery Images</div>
                            <div id="image-wrapper">
                                <div class="image-group mb-3 p-3 border rounded shadow-sm bg-light">
                                    <div class="row align-items-center">
                                        <div class="col-md-6">
                                            <label class="small fw-bold">Select File</label>
                                            <input type="file" name="image[]" class="form-control img-input" required />
                                            @error('image[]') <span class="text-danger small">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-5">
                                            <label class="small fw-bold">Image Title/Alt</label>
                                            <input type="text" name="title[]" class="form-control"
                                                placeholder="Alt Title" />

                                            @error('title[]') <span class="text-danger small">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div class="col-md-1 d-flex align-items-end">
                                            <button type="button" class="btn btn-success btn-increment mt-4"><i
                                                    class="fa fa-plus"></i></button>
                                        </div>
                                    </div>
                                    <div class="image-preview-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Right Side --}}
                <div class="col-lg-4">
                    {{-- Pricing --}}
                    <div class="card">
                        <div class="card-body">
                            <div class="section-title">Pricing & Inventory</div>
                            <div class="mb-3">
                                <label class="form-label">Purchase Price *</label>
                                <input type="number" name="purchase_price" class="form-control"
                                    value="{{ old('purchase_price') }}" required />
                                @error('purchase_price') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Old Price (Regular)</label>
                                <input type="number" name="old_price" class="form-control" value="{{ old('old_price') }}" />
                                @error('old_price') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">New Price (Sale) *</label>
                                <input type="number" name="new_price" class="form-control" value="{{ old('new_price') }}"
                                    required />
                                @error('onew_pricee') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Stock Quantity *</label>
                                <input type="number" name="stock" class="form-control" value="{{ old('stock') }}"
                                    required />
                                @error('stock') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                        </div>
                    </div>

                    {{-- Variations --}}
                    <div class="card">
                        <div class="card-body">
                            <div class="section-title">Product Variants</div>

                            <div class="mb-4">
                                <label class="form-label d-block">Available Sizes</label>
                                <div class="attr-container">
                                    @foreach($sizes as $size)
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" name="proSize[]"
                                                value="{{ $size->id }}" id="size{{ $size->id }}">
                                            <label class="form-check-label"
                                                for="size{{ $size->id }}">{{ $size->sizeName }}</label>
                                        </div>
                                    @endforeach

                                    @error('proSize[]') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <!--<div class="mb-3">-->
                            <!--    <label class="form-label d-block">Available Colors</label>-->
                            <!--    <div class="attr-container">-->
                            <!--        @foreach($colors as $color)-->
                            <!--            <div class="form-check form-check-inline">-->
                            <!--                <input class="form-check-input" type="checkbox" name="proColor[]"-->
                            <!--                    value="{{ $color->id }}" id="color{{ $color->id }}">-->
                            <!--                <label class="form-check-label"-->
                            <!--                    for="color{{ $color->id }}">{{ $color->colorName }}</label>-->
                            <!--            </div>-->
                            <!--        @endforeach-->
                            <!--        @error('proColor[]') <span class="text-danger small">{{ $message }}</span> @enderror-->
                            <!--    </div>-->
                            <!--</div>-->
                        </div>
                    </div>

                    {{-- Publication --}}
                    <div class="card">
                        <div class="card-body">
                            <div class="section-title">Status & Visibility</div>
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input" type="checkbox" name="status" value="1" checked
                                    id="statusSwitch" style="width: 40px; height: 20px;">
                                <label class="form-check-label ms-2" for="statusSwitch">Active Status</label>
                                @error('status') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-check form-switch mb-4">
                                <input class="form-check-input" type="checkbox" name="topsale" value="1" id="hotDealSwitch"
                                    style="width: 40px; height: 20px;">
                                {{-- <label class="form-check-label ms-2" for="hotDealSwitch">Hot Deals</label> --}}
                                <label class="form-check-label ms-2" for="hotDealSwitch">Sale</label>
                                @error('topsale') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>


                            <div class="form-check form-switch mb-4">
                                <input class="form-check-input" type="checkbox" name="demand" value="1" id="demand"
                                    style="width: 40px; height: 20px;" checked>
                                {{-- <label class="form-check-label ms-2" for="hotDealSwitch">Hot Deals</label> --}}
                                <label class="form-check-label ms-2" for="demand">Demand</label>
                                @error('demand') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <div class="form-check form-switch mb-4">
                                <input class="form-check-input" type="checkbox" name="tavaas" value="1" id="tavaas"
                                    style="width: 40px; height: 20px;">
                                {{-- <label class="form-check-label ms-2" for="hotDealSwitch">Hot Deals</label> --}}
                                <label class="form-check-label ms-2" for="demand">Tavaas</label>
                                @error('tavaas') <span class="text-danger small">{{ $message }}</span> @enderror
                            </div>
                            <button type="submit" class="btn btn-success w-100 py-2 fw-bold shadow-sm rounded-pill">
                                <i class="fa fa-save me-1"></i> SAVE PRODUCT
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    {{-- Hidden Clone Template --}}
    <div id="image-template" class="d-none">
        <div class="image-group mb-3 p-3 border rounded shadow-sm bg-light">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <input type="file" name="image[]" class="form-control img-input" />
                </div>
                <div class="col-md-5">
                    <input type="text" name="title[]" class="form-control" placeholder="Image Title" />
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger mt-1 btn-remove"><i class="fa fa-trash"></i></button>
                </div>
            </div>
            <div class="image-preview-container"></div>
        </div>
    </div>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

    <script>
        $(document).ready(function () {
            // 1. Initialize Plugins
            $('.select2').select2({ width: '100%' });

            $('#summernote').summernote({
                placeholder: 'Enter detailed description here...',
                height: 250,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview']]
                ]
            });

            // 2. Dynamic Image Fields (Plus Button)
            $(document).on('click', '.btn-increment', function () {
                let html = $('#image-template').html();
                $('#image-wrapper').append(html);
            });

            $(document).on('click', '.btn-remove', function () {
                $(this).closest('.image-group').remove();
            });

            // 3. Image Preview Logic
            $(document).on('change', '.img-input', function () {
                let container = $(this).closest('.image-group').find('.image-preview-container');
                container.empty();
                if (this.files && this.files[0]) {
                    let reader = new FileReader();
                    reader.onload = function (e) {
                        container.append(`<div class="preview-box mt-2 shadow-sm"><img src="${e.target.result}"></div>`);
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });

            // 4. Category to Subcategory AJAX
            $('#category_id').change(function () {
                let category_id = $(this).val();
                if (category_id) {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('ajax-product-subcategory') }}",
                        data: { category_id: category_id },
                        success: function (res) {
                            $('#subcategory_id').empty().append('<option value="">Select SubCategory</option>');
                            $('#childcategory_id').empty().append('<option value="">Select Child Category</option>');
                            $.each(res, function (key, value) {
                                $('#subcategory_id').append('<option value="' + key + '">' + value + '</option>');
                            });
                        }
                    });
                }
            });

            // 5. Subcategory to Child AJAX
            $('#subcategory_id').change(function () {
                let subcategory_id = $(this).val();
                if (subcategory_id) {
                    $.ajax({
                        type: "GET",
                        url: "{{ url('ajax-product-childcategory') }}",
                        data: { subcategory_id: subcategory_id },
                        success: function (res) {
                            $('#childcategory_id').empty().append('<option value="">Select Child Category</option>');
                            $.each(res, function (key, value) {
                                $('#childcategory_id').append('<option value="' + key + '">' + value + '</option>');
                            });
                        }
                    });
                }
            });
        });
    </script>
@endsection