@extends('admin.master')
@if(isset($editModeData))
    @section('title','Edit Product')
@else
    @section('title','Add Product')
@endif

@section('page_css')
<style>
    /* =========================================================================
       YOUR EXACT ORIGINAL FORM DESIGN (100% UNTOUCHED & CLEAN)
       ========================================================================= */
    .panel-info { border: 1px solid #dce1e4; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
    .form-group label { font-weight: 600; font-size: 13px; color: #444; }
    
    /* THE RESPONSIVE STICKY FOOTER FIX */
    .sticky-footer { 
        position: fixed; 
        bottom: 0; 
        right: 0; 
        background: #fff; 
        padding: 12px 30px; 
        border-top: 1px solid #ddd; 
        border-left: 1px solid #ddd;
        border-radius: 10px 0 0 0; 
        z-index: 1000; 
        text-align: right; 
        box-shadow: -3px -3px 10px rgba(0,0,0,0.06); 
    }
    
    .text-danger { color: #e74c3c !important; font-weight: bold; margin-left: 3px; }
    .prefix-box { background: #f8f9fa !important; color: #333 !important; font-weight: bold; border: 1px solid #ccc !important; padding: 0 10px; }
    .prefix-box input { background: transparent; border: none; color: #000; width: 50px; text-align: center; font-weight: bold; outline: none; }
    .btn-generate { background-color: #31a2f2; color: #fff; border: none; }
    .btn-generate:hover { background-color: #1a8ad6; color: #fff; }
    .radio-inline { margin-right: 15px; font-weight: normal; cursor: pointer; }
    .section-title { font-size: 15px; border-bottom: 2px solid #eee; padding-bottom: 5px; margin-bottom: 15px; color: #333; font-weight: 600; }
    
    /* Margin for stacked items on mobile */
    .resp-mb { margin-bottom: 0px; }

    /* MEDIA QUERIES FOR MOBILE & TABLET (FORM) */
    @media (max-width: 768px) {
        .sticky-footer { 
            left: 0; 
            width: 100%; 
            border-radius: 0; 
            border-left: none;
            padding: 10px 15px; 
            text-align: center; 
        }
        .sticky-footer .btn { width: 100%; display: block; margin-bottom: 5px;}
        .form-group label { margin-top: 10px; }
        .resp-mb { margin-bottom: 15px; }
        .nav-tabs>li>a { padding: 10px 8px; font-size: 12px; }
        .page-title { font-size: 18px !important; display: block !important; margin-bottom: 10px; }
        .bg-title .pull-right { float: none !important; display: block; width: 100%; text-align: center; }
    }
</style>
<link rel="stylesheet" href="{!! asset('admin_assets/plugins/bower_components/summernote/dist/summernote-bs4.css') !!}">
@endsection

@section('content')
<div class="container-fluid" style="padding-bottom: 90px;">
    <div class="row bg-title" style="background: none; box-shadow: none; margin-bottom: 10px;">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <h4 class="page-title" style="display: inline-block; color: #31a2f2; font-weight: 700;"><i class="fa fa-cubes"></i> Product Management</h4>
            <span class="hidden-xs" style="color: #999; font-size: 18px;"> / </span>
            <span class="hidden-xs" style="font-size: 16px; font-weight: 600; color: #666;">@yield('title')</span>
            <a href="{{route('product.index')}}" class="btn btn-sm pull-right" style="background-color: #00c292; color:white; border:none; font-weight: bold;"><i class="fa fa-list-ul"></i> View All Products</a>
        </div>
    </div>

    @if(session()->has('success'))
        <div class="alert alert-success alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><i class="cr-icon glyphicon glyphicon-ok"></i>&nbsp;<strong>{{ session()->get('success') }}</strong></div>
    @endif
    @if(session()->has('error'))
        <div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><i class="glyphicon glyphicon-remove"></i>&nbsp;<strong>{{ session()->get('error') }}</strong></div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            @foreach($errors->all() as $error) <strong>{!! $error !!}</strong><br> @endforeach
        </div>
    @endif

    @if(isset($editModeData))
        {{ Form::model($editModeData, array('route' => array('product.update', $editModeData->id), 'method' => 'PUT','files' => 'true','class' => 'form-horizontal')) }}
    @else
        {{ Form::open(array('route' => 'product.store','enctype'=>'multipart/form-data','class'=>'form-horizontal')) }}
    @endif

    <div class="row">
        <div class="col-md-7 col-sm-12 col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading"><i class="fa fa-info-circle"></i> General & Pricing Information</div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-md-3 col-sm-12 col-xs-12">Product Name<span class="text-danger">*</span></label>
                        <div class="col-md-9 col-sm-12 col-xs-12">{!! Form::text('name', null, ['class'=>'form-control', 'required', 'placeholder'=>'e.g. Samsung Galaxy S23 Ultra']) !!}</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="col-md-3 col-sm-12 col-xs-12">Code / SKU<span class="text-danger">*</span></label>
                        <div class="col-md-9 col-sm-12 col-xs-12">
                            <div class="input-group">
                                <span class="input-group-addon prefix-box">
                                    <input type="text" id="prefix_val" value="{{ isset($editModeData) ? explode('-', $editModeData->code)[0] : 'SKU' }}" oninput="syncCode()">
                                </span>
                                {!! Form::text('code', null, ['class'=>'form-control required', 'id'=>'product_code', 'readonly']) !!}
                                <span class="input-group-btn">
                                    <button class="btn btn-generate" type="button" onclick="createNewNumber()"><i class="fa fa-refresh"></i> Generate</button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 col-sm-12 col-xs-12 resp-mb">
                            <label class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">Category<span class="text-danger">*</span></label>
                            <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">{{ Form::select('category_id',$category, null, ['class' => 'form-control select2','id'=>'category_id','required']) }}</div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12 resp-mb">
                            <label class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">Sub Category</label>
                            <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">{{ Form::select('sub_category_id',[''=>'--Select Sub--'], null, ['class' => 'form-control select2','id'=>'sub_category_id']) }}</div>
                        </div>
                    </div>

                    <div class="row m-t-15">
                        <div class="col-md-6 col-sm-12 col-xs-12 resp-mb">
                            <label class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">Brand</label>
                            <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">{{ Form::select('brand',$brand, null, ['class' => 'form-control select2']) }}</div>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12 resp-mb">
                            <label class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">Unit<span class="text-danger">*</span></label>
                            <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">{{ Form::select('unit',$unit, null, ['class' => 'form-control select2', 'required']) }}</div>
                        </div>
                    </div>

                    <div class="row m-t-15">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <label class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">Product Variants (Color, Size, RAM, etc.)</label>
                            <div class="col-md-12 col-sm-12 col-xs-12" style="padding-left: 0;">
                                {{ Form::select('variant[]', $variant, @$variantSelected, ['class' => 'form-control select2', 'multiple' => 'multiple', 'data-placeholder' => 'Select multiple variants if applicable']) }}
                            </div>
                        </div>
                    </div>

                    <h5 class="section-title m-t-30"><i class="fa fa-money"></i> Pricing Setup</h5>
                    <div class="row">
                        <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Purchase Cost<span class="text-danger">*</span></label>{!! Form::text('product_cost', null, ['class'=>'form-control', 'placeholder'=>'0.00', 'required']) !!}</div>
                        <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Retail Price<span class="text-danger">*</span></label>{!! Form::text('retail_price', null, ['class'=>'form-control', 'placeholder'=>'0.00', 'required']) !!}</div>
                        <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Wholesale Price<span class="text-danger">*</span></label>{!! Form::text('wholesale_price', null, ['class'=>'form-control', 'placeholder'=>'0.00', 'required']) !!}</div>
                        <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Discount Price</label>{!! Form::text('retail_price_after_discount', null, ['class'=>'form-control', 'placeholder'=>'0.00']) !!}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-5 col-sm-12 col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading"><i class="fa fa-shield"></i> Warranty & Serial Control</div>
                <div class="panel-body" style="background: #fbfbfb;">
                    <div class="row">
                        <div class="col-md-6 col-sm-12 col-xs-12 resp-mb">
                            <label style="color:#d35400;"><i class="fa fa-barcode"></i> Has Serial / IMEI?</label><br>
                            <label class="radio-inline text-success" style="font-weight: bold;">
                                {{ Form::radio('is_serial', '1', (isset($editModeData) && $editModeData->is_serial == 1) ? true : false) }} YES
                            </label>
                            <label class="radio-inline text-danger" style="font-weight: bold;">
                                {{ Form::radio('is_serial', '0', (isset($editModeData) && $editModeData->is_serial == 0) ? true : (!isset($editModeData) ? true : false)) }} NO
                            </label>
                            <p class="text-muted" style="font-size: 11px; margin-top: 5px;">Select YES for Phones, Laptops, Monitors etc.</p>
                        </div>
                        <div class="col-md-6 col-sm-12 col-xs-12 resp-mb">
                            <label>Warranty Status</label>
                            {{Form::select('warranty_status',['0'=>'No Warranty','1'=>'Warranty Available'], null,['class'=>'form-control select2', 'id'=>'warranty_status'] )}}
                        </div>
                    </div>
                    
                    <div class="row m-t-15" id="warranty_details_section" style="{{ (isset($editModeData) && $editModeData->warranty_status == 1) ? '' : 'display:none;' }}">
                        <div class="col-md-4 col-sm-12 col-xs-12 resp-mb">
                            <label>Lifetime?</label><br>
                            <label class="radio-inline">{{ Form::radio('lifetime_warranty', '1', null, ['id'=>'lt_yes']) }} Yes</label>
                            <label class="radio-inline">{{ Form::radio('lifetime_warranty', '0', true, ['id'=>'lt_no']) }} No</label>
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-6 resp-mb">
                            <label>Parts (Days)</label>
                            {!! Form::number('warranty_days', null, ['class'=>'form-control input-sm', 'id'=>'w_days', 'placeholder'=>'e.g. 365']) !!}
                        </div>
                        <div class="col-md-4 col-sm-6 col-xs-6 resp-mb">
                            <label>Service (Days)</label>
                            {!! Form::number('service_warranty', null, ['class'=>'form-control input-sm', 'id'=>'s_days', 'placeholder'=>'e.g. 730']) !!}
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading"><i class="fa fa-database"></i> Inventory & Status</div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-12 resp-mb"><label>Alert Qty (Low Stock)<span class="text-danger">*</span></label>{!! Form::number('alert_quantity', isset($editModeData) ? $editModeData->alert_qty : 5, ['class'=>'form-control', 'required']) !!}</div>
                        <div class="col-md-6 col-sm-6 col-xs-12 resp-mb"><label>Product Status</label>{{Form::select('status',['1'=>'Active','0'=>'Inactive'], null,['class'=>'form-control select2'] )}}</div>
                    </div>
                    
                    @if(!isset($editModeData))
                    <label class="m-t-20 section-title">Initial Opening Stock</label>
                    <div class="table-responsive" style="max-height: 180px; overflow-y: auto; border: 1px solid #e0e0e0; border-radius: 4px;">
                        <table class="table table-bordered mb-0 table-striped">
                            <thead style="background: #f1f3f4;"><tr><th>Warehouse</th><th width="90px">Qty</th><th width="100px">Rack No</th></tr></thead>
                            <tbody>
                                @foreach($warehouse as $key => $w)
                                <tr>
                                    <td style="font-size: 12px; font-weight: bold; vertical-align: middle;">{{ $w->name }}<input type="hidden" name="warehouse_id[]" value="{{ $w->id }}"></td>
                                    <td><input type="number" name="quantity[]" value="0" class="form-control input-sm text-center"></td>
                                    <td><input type="text" name="racks[]" class="form-control input-sm" placeholder="e.g. A-1"></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading"><i class="fa fa-image"></i> Media & Description</div>
                <div class="panel-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#media" data-toggle="tab" style="font-weight: bold;"><i class="fa fa-camera"></i> Images</a></li>
                        <li><a href="#short" data-toggle="tab" style="font-weight: bold;"><i class="fa fa-align-left"></i> Short Desc.</a></li>
                        <li><a href="#full" data-toggle="tab" style="font-weight: bold;"><i class="fa fa-align-justify"></i> Full Desc.</a></li>
                        <li><a href="#marketing" data-toggle="tab" style="font-weight: bold;"><i class="fa fa-bullhorn"></i> Tags & Web</a></li>
                    </ul>
                    <div class="tab-content" style="padding: 20px 10px; border: 1px solid #ddd; border-top: none;">
                        
                        <div class="tab-pane active" id="media">
                            <div class="row">
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Main/Thumb Image</label><input type="file" name="thumb_image" class="form-control" accept="image/*"></div>
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Gallery Image 1</label><input type="file" name="image_one" class="form-control" accept="image/*"></div>
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Gallery Image 2</label><input type="file" name="image_two" class="form-control" accept="image/*"></div>
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb"><label>Gallery Image 3</label><input type="file" name="image_three" class="form-control" accept="image/*"></div>
                            </div>
                        </div>

                        <div class="tab-pane" id="short">{!! Form::textarea('short_description', null, ['class'=>'form-control summernote']) !!}</div>
                        <div class="tab-pane" id="full">{!! Form::textarea('description', null, ['class'=>'form-control summernote']) !!}</div>
                        
                        <div class="tab-pane" id="marketing">
                            <div class="row">
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb">
                                    <div class="checkbox checkbox-info checkbox-circle">
                                        {!! Form::hidden('is_new_arrival', 0) !!}
                                        {{ Form::checkbox('is_new_arrival', '1', null, ['id'=>'new_arr']) }} <label for="new_arr">New Arrival</label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb">
                                    <div class="checkbox checkbox-info checkbox-circle">
                                        {!! Form::hidden('is_best_seller', 0) !!}
                                        {{ Form::checkbox('is_best_seller', '1', null, ['id'=>'best_sel']) }} <label for="best_sel">Best Seller</label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb">
                                    <div class="checkbox checkbox-info checkbox-circle">
                                        {!! Form::hidden('is_featured_item', 0) !!}
                                        {{ Form::checkbox('is_featured_item', '1', null, ['id'=>'feat_item']) }} <label for="feat_item">Featured Product</label>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-6 col-xs-12 resp-mb">
                                    <div class="checkbox checkbox-info checkbox-circle">
                                        {!! Form::hidden('is_ecom_item', 0) !!}
                                        {{ Form::checkbox('is_ecom_item', '1', null, ['id'=>'web_item']) }} <label for="web_item">Show on Website</label>
                                    </div>
                                </div>
                            </div>
                        </div>

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

    <div class="sticky-footer">
        <button type="submit" class="btn" style="padding: 10px 40px; font-size: 16px; font-weight: 700; background-color: #00c292; color:white; border:none; border-radius: 4px; box-shadow: 0 4px 6px rgba(0,194,146,0.3);"><i class="fa fa-save"></i> SAVE PRODUCT</button>
    </div>

    {{ Form::close() }}
</div>
@endsection

@section('page_scripts')
    <script src="{!! asset('admin_assets/plugins/bower_components/summernote/dist/summernote-bs4.min.js') !!}"></script>
    <script type="text/javascript">
        
        let currentRandomPart = '';

        $(document).ready(function () {
            
            // Generate Code for New Product
            @if(!isset($editModeData))
                currentRandomPart = Math.floor(100000 + Math.random() * 900000).toString();
                syncCode();
            @else
                currentRandomPart = "{{ explode('-', $editModeData->code)[1] ?? '' }}";
            @endif

            $('.summernote').summernote({ height: 120, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['para', ['ul', 'ol', 'paragraph']], ['view', ['fullscreen', 'codeview']] ] });

            // Sub Category AJAX
            $('#category_id').on('change', function() {
                var catId = $(this).val();
                if(catId) {
                    $.ajax({
                        url: '{{ url("admin/product/getCategoryWiseSubCategory") }}',
                        type: "GET",
                        data: {categoryId: catId},
                        dataType: "json",
                        success:function(data) {
                            $('#sub_category_id').empty().append('<option value="">--Select Sub--</option>');
                            if(data.data){
                                $.each(data.data, function(key, value) {
                                    $('#sub_category_id').append('<option value="'+ value.id +'">'+ value.name +'</option>');
                                });
                            }
                        }
                    });
                } else {
                    $('#sub_category_id').empty();
                }
            });

            // Smart Warranty Logic
            $('#warranty_status').on('change', function() {
                if($(this).val() == '1') {
                    $('#warranty_details_section').slideDown();
                } else {
                    $('#warranty_details_section').slideUp();
                    $('#w_days').val('');
                    $('#s_days').val('');
                    $('#lt_no').prop('checked', true);
                }
            });

            $('input[name=lifetime_warranty]').on('change', function() {
                if($(this).val() == '1') {
                    $('#w_days').val('').prop('readonly', true);
                } else {
                    $('#w_days').prop('readonly', false);
                }
            });
            
            // Check initial state for Edit Mode
            if($('input[name=lifetime_warranty]:checked').val() == '1') {
                $('#w_days').prop('readonly', true);
            }
        });

        function syncCode() {
            let prefix = document.getElementById('prefix_val').value || 'SKU';
            document.getElementById('product_code').value = prefix + "-" + currentRandomPart;
        }

        function createNewNumber() {
            currentRandomPart = Math.floor(100000 + Math.random() * 900000).toString();
            syncCode();
        }
    </script>
@endsection