@extends('admin.lyoute.masterpage2')

@php
    $isEdit = isset($productModel);
    $currentPrices = [];
    if ($isEdit) {
        $stagePrices = $productModel->stagePrices;
        foreach ($stagePrices as $sp) {
            if ($sp->stage_id === 'kabooi' && $sp->noedarz) {
                $currentPrices[$sp->stage_id][$sp->noedarz] = $sp->price;
            } else {
                $currentPrices[$sp->stage_id] = $sp->price;
            }
        }
    }
@endphp

@section('page_title', $isEdit ? 'ویرایش مدل' : 'افزودن مدل جدید')

@section('main_section')

    {{-- ✅ CSS مستقیم اینجا --}}
    <style>
        .price-input::-webkit-outer-spin-button,
        .price-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        .price-input {
            -moz-appearance: textfield;
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: 1px;
            color: #2c3e50;
            border: 2px solid #e0e6ed;
            transition: all 0.2s;
            direction: ltr;
            text-align: center;
        }
        .price-input:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
            outline: none;
            background-color: #f8faff;
        }
        .price-input::placeholder {
            color: #adb5bd;
            font-weight: 400;
        }
        .stage-price-card {
            transition: all 0.2s;
            border-color: #e0e6ed !important;
        }
        .stage-price-card:hover {
            border-color: #007bff !important;
            background-color: #f8faff !important;
        }
        .stage-price-card .input-group-text {
            font-size: 0.85rem;
            color: #6c757d;
            border: 2px solid #e0e6ed;
            border-right: none;
            font-weight: 500;
        }
        .stage-price-card .price-input + .input-group-text {
            border-left: none;
        }
        .stage-price-card .badge {
            font-size: 0.75rem;
            font-weight: 500;
            padding: 0.35em 0.7em;
        }
    </style>

    <div class="container-fluid">
        @if($errors->any())
            <div class="alert alert-danger alert-dismissible fade show">
                <ul class="mb-0">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        @endif

        <div class="card shadow">
            <div class="card-header {{ $isEdit ? 'bg-warning text-dark' : 'bg-primary text-white' }}">
                <h4 class="mb-0">
                    <i class="fas fa-{{ $isEdit ? 'edit' : 'plus' }} ml-2"></i>
                    {{ $isEdit ? 'ویرایش مدل: ' . $productModel->name : 'تعریف مدل جدید' }}
                </h4>
            </div>

            <form action="{{ $isEdit ? route('admin.product-models.update', $productModel->id) : route('admin.product-models.store') }}" method="POST" id="productModelForm">
                @csrf
                @if($isEdit) @method('PUT') @endif

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label>نام مدل *</label>
                                <input type="text" name="name" class="form-control"
                                       value="{{ old('name', $productModel->name ?? '') }}"
                                       required placeholder="مثلاً: شلوار کتان">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <div class="custom-control custom-switch mt-4">
                                    @php
                                        $isActive = old('is_active', $productModel->is_active ?? true);
                                    @endphp
                                    <input type="checkbox" name="is_active" class="custom-control-input" id="is_active" value="1"
                                        {{ $isActive ? 'checked' : '' }}>
                                    <label class="custom-control-label" for="is_active">مدل فعال باشد</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label>توضیحات</label>
                        <textarea name="description" class="form-control" rows="3">{{ old('description', $productModel->description ?? '') }}</textarea>
                    </div>

                    <hr class="my-4">

                    @if(isset($stages))
                        <div class="card border-0 shadow-sm">
                            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                                <span class="fw-bold"><i class="fas fa-tags ml-2"></i> تعرفه مراحل دوخت</span>
                                <small>قیمت هر مرحله برای این مدل خاص (به تومان)</small>
                            </div>
                            <div class="card-body">
                                <div class="row g-3">
                                    @foreach($stages as $stage)
                                        <div class="col-12">
                                            <div class="stage-price-card border rounded p-3 bg-light">
                                                <div class="d-flex align-items-center mb-3 flex-wrap">
                                                    <i class="{{ $stage->icon ?? 'fas fa-circle' }} text-primary me-2 fs-5"></i>
                                                    <h6 class="mb-0 fw-bold me-2">{{ $stage->name }}</h6>
                                                    @if($stage->default_price)
                                                        <span class="badge bg-info text-dark">
                                                            قیمت پایه: {{ number_format($stage->default_price) }} تومان
                                                        </span>
                                                    @endif
                                                </div>

                                                @if($stage->code === 'kabooi')
                                                    <div class="row g-3">
                                                        @foreach(['جلو', 'بغل', 'پشت'] as $noedarz)
                                                            <div class="col-md-4 col-12">
                                                                <label class="form-label small fw-bold text-secondary mb-1">
                                                                    درز {{ $noedarz }}
                                                                </label>
                                                                <div class="input-group">
                                                                    <input type="text"
                                                                           inputmode="numeric"
                                                                           name="prices[kabooi][{{ $noedarz }}]"
                                                                           class="form-control price-input text-center"
                                                                           value="{{ old("prices.kabooi.$noedarz", $currentPrices['kabooi'][$noedarz] ?? '') }}"
                                                                           placeholder="0"
                                                                           autocomplete="off">
                                                                    <span class="input-group-text bg-white">تومان</span>
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                @else
                                                    <div class="row">
                                                        <div class="col-md-5 col-12">
                                                            <label class="form-label small fw-bold text-secondary mb-1">
                                                                قیمت واحد
                                                            </label>
                                                            <div class="input-group">
                                                                <input type="text"
                                                                       inputmode="numeric"
                                                                       name="prices[{{ $stage->code }}]"
                                                                       class="form-control price-input text-center"
                                                                       value="{{ old("prices.$stage->code", $currentPrices[$stage->code] ?? '') }}"
                                                                       placeholder="0"
                                                                       autocomplete="off">
                                                                <span class="input-group-text bg-white">تومان</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-success">
                        {{ $isEdit ? 'بروزرسانی مدل و قیمت‌ها' : 'ذخیره مدل' }}
                    </button>
                    <a href="{{ route('admin.product-models.index') }}" class="btn btn-secondary">انصراف</a>
                </div>
            </form>
        </div>
    </div>

    {{-- ✅ JS مستقیم اینجا — بدون @section --}}
    <script>
        (function() {
            function initPriceInputs() {
                var inputs = document.querySelectorAll('.price-input');
                console.log('✅ تعداد فیلد قیمت پیدا شده:', inputs.length);

                inputs.forEach(function (input) {
                    // فرمت اولیه
                    if (input.value) {
                        formatPriceInput(input);
                    }

                    // هنگام تایپ
                    input.addEventListener('input', function () {
                        formatPriceInput(this);
                    });

                    // جلوگیری از ورود حروف
                    input.addEventListener('keypress', function (e) {
                        if (!/[\d]/.test(e.key)) {
                            e.preventDefault();
                        }
                    });

                    // مکان‌نما آخر بمونه
                    input.addEventListener('focus', function () {
                        setTimeout(function() {
                            var len = this.value.length;
                            this.setSelectionRange(len, len);
                        }.bind(this), 0);
                    });
                });

                // حذف کاما قبل از submit
                var form = document.getElementById('productModelForm');
                if (form) {
                    form.addEventListener('submit', function () {
                        document.querySelectorAll('.price-input').forEach(function (input) {
                            input.value = input.value.replace(/,/g, '');
                        });
                    });
                }
            }

            function formatPriceInput(input) {
                var value = input.value.replace(/[^\d]/g, '');
                if (value.length > 1) {
                    value = value.replace(/^0+/, '');
                }
                if (value) {
                    value = Number(value).toLocaleString('en-US');
                }
                input.value = value;
            }

            // اجرا بعد از لود DOM
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initPriceInputs);
            } else {
                initPriceInputs();
            }
        })();
    </script>
@endsection