@extends('layouts.layout')
@section('content')
    <style>
        label {
            text-transform: capitalize;
        }

        .form-group-inner-main {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .stone-row {
            display: flex;
            gap: 10px;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .stone-row .form-group {
            flex: 1 1 150px;
            margin-bottom: 10px;
        }

        .remove-row {
            color: red;
            cursor: pointer;
            font-size: 18px;
        }

        .hidden {
            display: none;
        }

        .card .card-header {
            background-color: #fff;
            border-bottom: 1px solid #f8f8f9;
            padding: 30px 30px 10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card .card-body {
            padding: 2px 30px 30px;
        }

        .add-btn {
            margin-top: 10px;
        }

        .disabled-input {
            background-color: #f1f1f1 !important;
        }
    </style>

    <div class="page-body">
        <div class="container-fluid">
            <div class="page-header">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="page-header-left">
                            <h3>Bespoke Services Intake
                                <small>Diamond Admin Panel</small>
                            </h3>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ol class="breadcrumb pull-right">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dashboard') }}">
                                    <i data-feather="home"></i>
                                </a>
                            </li>
                            <li class="breadcrumb-item"><a href="{{ route('custom.intake.list') }}">Bespoke Intake List</a>
                            </li>
                            <li class="breadcrumb-item active">Create Intake</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <form action="{{ $action_url }}" method="POST" enctype="multipart/form-data" class="needs-validation"
                novalidate>
                @csrf
                <div class="row product-adding">
                    {{-- Left Column --}}
                    <div class="col-xl-6">
                        <div class="card">
                            <div class="card-header">
                                <h5>General Information</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label><span>*</span> Sales Person Name</label>
                                    <input type="text" name="sales_person_name"
                                        class="form-control @error('sales_person_name') is-invalid @enderror"
                                        value="{{ old('sales_person_name') }}" placeholder="Please Enter Sales Person Name">
                                    @error('sales_person_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> Customer Name</label>
                                    <input type="text" name="customer_name"
                                        class="form-control @error('customer_name') is-invalid @enderror"
                                        value="{{ old('customer_name') }}" placeholder="Please Enter Customer Name">
                                    @error('customer_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> Street Address</label>
                                    <input type="text" name="street_address"
                                        class="form-control @error('street_address') is-invalid @enderror"
                                        value="{{ old('street_address') }}" placeholder="Please Enter Street Address">
                                    @error('street_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror

                                </div>

                                <div class="form-group">
                                    <label><span>*</span> City</label>
                                    <input type="text" name="city"
                                        class="form-control @error('city') is-invalid @enderror" value="{{ old('city') }}"
                                        placeholder="Please Enter City">
                                    @error('city')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> State</label>
                                    <select name="state" class="form-control @error('state') is-invalid @enderror">
                                        <option value="">--Select State--</option>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}"
                                                {{ old('state') == $state->id ? 'selected' : '' }}>
                                                {{ ucwords(strtolower($state->name)) }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('state')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> Zip</label>
                                    <input type="text" name="zip"
                                        class="form-control @error('zip') is-invalid @enderror" value="{{ old('zip') }}"
                                        placeholder="Please Enter Zip">
                                    @error('zip')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> Email Address</label>
                                    <input type="email" name="email"
                                        class="form-control @error('email') is-invalid @enderror"
                                        value="{{ old('email') }}" placeholder="Please Enter Email Address">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="form-group">
                                    <label><span>*</span> Phone Number</label>
                                    <input type="phone" name="phone"
                                        class="form-control @error('phone') is-invalid @enderror"
                                        value="{{ old('phone') }}" placeholder="Please Enter Phone Number">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span>Intake Date </label>
                                    <input type="date" name="intake_date"
                                        class="form-control @error('intake_date') is-invalid @enderror"
                                        value="{{ old('intake_date', date('Y-m-d')) }}"
                                        placeholder="Please Enter Intake Date">
                                    @error('intake_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h5>Product Details</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Engraving Font</label>
                                    <select name="engraving_font" id="engraving_font" class="form-control">
                                        <option value="">N/A</option>
                                        @foreach ($fonts as $font)
                                            <option value="{{ old('engraving_font', $font->id) }}">{{ $font->value }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label>Engraving Text</label>
                                    <input type="text" name="engraving_text" id="engraving_text" class="form-control"
                                        placeholder="Please Enter" maxlength="30" value="{{ old('engraving_text') }}">
                                </div>

                                <div class="form-group">
                                    <label>Ring Size (if ring)</label>
                                    <select name="ring_size" class="form-control">
                                        <option value="">--Select--</option>
                                        @for ($i = 3; $i <= 15.75; $i += 0.25)
                                            <option value="{{ $i }}"
                                                {{ old('ring_size') == $i ? 'selected' : '' }}>{{ $i }}
                                            </option>
                                        @endfor
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> Metals</label>
                                    <select name="metal" class="form-control @error('metal') is-invalid @enderror">
                                        <option value="">--Select--</option>
                                        {{-- @foreach ($metaltypes as $metal)
                                            <option value="{{ $metal->id }}"
                                                {{ old('metal') == $metal->id ? 'selected' : '' }}>
                                                {{ $metal->metal }}
                                            </option>
                                        @endforeach --}}
                                        <option value="1" {{ old('metal') == 1 ? 'selected' : '' }}>14K gold</option>
                                        <option value="2" {{ old('metal') == 2 ? 'selected' : '' }}>18K gold</option>
                                        <option value="3" {{ old('metal') == 3 ? 'selected' : '' }}>22K gold</option>
                                        <option value="4" {{ old('metal') == 4 ? 'selected' : '' }}>Platinum</option>
                                        <option value="5" {{ old('metal') == 5 ? 'selected' : '' }}>Palladium
                                        </option>
                                    </select>
                                    @error('metal')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label><span>*</span> Colors</label>
                                    <select name="color" class="form-control @error('color') is-invalid @enderror">
                                        <option value="">--Select--</option>

                                        <option value="1" {{ old('color') == 1 ? 'selected' : '' }}>White</option>
                                        <option value="2" {{ old('color') == 2 ? 'selected' : '' }}>Yellow</option>
                                        <option value="3" {{ old('color') == 3 ? 'selected' : '' }}>Rose</option>
                                        <option value="7" {{ old('color') == 7 ? 'selected' : '' }}>Platinum</option>

                                        <option value="14" {{ old('color') == 14 ? 'selected' : '' }}>Rose/Yellow
                                        </option>
                                        <option value="15" {{ old('color') == 15 ? 'selected' : '' }}>Rose/White
                                        </option>
                                        <option value="16" {{ old('color') == 16 ? 'selected' : '' }}>
                                            Rose/Yellow/White</option>
                                        <option value="17" {{ old('color') == 17 ? 'selected' : '' }}>Yellow/White
                                        </option>
                                    </select>

                                    @error('color')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>



                                <div class="form-group">
                                    <label><span>*</span> Description of Product</label>
                                    <textarea name="product_description" class="form-control @error('product_description') is-invalid @enderror"
                                        rows="4" placeholder="Please Enter Product Description">{{ old('product_description') }}</textarea>
                                    @error('product_description')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>


                                <div class="form-group">
                                    <label>Notes</label>
                                    <textarea name="notes" class="form-control" rows="3" placeholder="Please Enter Notes">{{ old('notes') }}</textarea>
                                </div>

                                <div class="form-group">
                                    <label>File Attachments</label>
                                    <input type="file" name="attachments[]" class="form-control" multiple
                                        accept=".jpg,.jpeg,.png">
                                    <small>Only JPG or PNG up to 6MB (max 5 files)</small>
                                </div>

                                <div class="form-group">
                                    <label for="price_input"><span>*</span> Price</label>
                                    <input type="number" name="price" id="price_input"
                                        class="form-control @error('price') is-invalid @enderror"
                                        placeholder="Please Enter Price (e.g., 99.50)"
                                        value="{{ old('price', $product->price ?? '') }}" step="0.01" min="0">
                                    @error('price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Right Column --}}
                    <div class="col-xl-6">
                        {{-- CENTER STONE --}}
                        <div class="card">
                            <div class="card-header">
                                <h5>Center Stone</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Toggle</label>
                                    <select id="toggle_center_stone" class="form-control" name="has_center_stones">
                                        <option value="0" {{ old('has_center_stones', 0) == 0 ? 'selected' : '' }}>No
                                            Stone</option>
                                        <option value="1" {{ old('has_center_stones', 0) == 1 ? 'selected' : '' }}>
                                            Center Stone</option>
                                    </select>
                                </div>

                                <div id="center_stone_rows" class="hidden">
                                    <div class="stone-row center-stone-row">
                                        @include('partials.center-stone-row', ['index' => 1])
                                    </div>
                                    <button type="button" id="add_center_stone" class="btn btn-sm btn-primary add-btn">
                                        + Add Center Stone
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- SIDE STONE --}}
                        <div class="card">
                            <div class="card-header">
                                <h5>Side Stones</h5>
                            </div>
                            <div class="card-body">
                                <div class="form-group">
                                    <label>Toggle</label>
                                    <select id="toggle_side_stone" class="form-control" name="has_side_stones">
                                        <option value="0" {{ old('has_side_stones', 0) == 0 ? 'selected' : '' }}>No
                                            Stones</option>
                                        <option value="1" {{ old('has_side_stones', 0) == 1 ? 'selected' : '' }}>Side
                                            Stones</option>
                                    </select>
                                </div>

                                <div id="side_stone_rows" class="hidden">
                                    <div class="stone-row side-stone-row">
                                        @include('partials.side-stone-row', ['index' => 1])
                                    </div>
                                    <button type="button" id="add_side_stone" class="btn btn-sm btn-primary add-btn">
                                        + Add Side Stone
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="digital-add needs-validation mb-3" style="display: flex;flex-direction: row-reverse;">
                    <div class="form-group mb-0">
                        <div class="product-buttons">
                            <button type="submit" class="btn btn-primary">Save</button>
                            <button type="reset" class="btn btn-dark">Discard</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {{--
    @push('scripts')
        <script>
            $(document).ready(function() {
                // --- Restore section visibility on page load ---
                if ($('#toggle_center_stone').val() === '1') {
                    $('#center_stone_rows').removeClass('hidden');
                }
                if ($('#toggle_side_stone').val() === '1') {
                    $('#side_stone_rows').removeClass('hidden');
                }

                // --- Engraving Logic ---
                $('#engraving_font').on('change', function() {
                    if ($(this).val() === '') {
                        $('#engraving_text').val('').prop('disabled', true).addClass('disabled-input');
                    } else {
                        $('#engraving_text').prop('disabled', false).removeClass('disabled-input');
                    }
                }).trigger('change');

                $('#engraving_text').on('input', function() {
                    if ($(this).val().length > 0 && $('#engraving_font').val() === 'N/A') {
                        $('#engraving_font').val('Freestyle Script');
                    }
                });

                // --- Toggle Logic ---
                $('#toggle_center_stone').on('change', function() {
                    $('#center_stone_rows').toggleClass('hidden', $(this).val() === '0');
                });

                $('#toggle_side_stone').on('change', function() {
                    $('#side_stone_rows').toggleClass('hidden', $(this).val() === '0');
                });

                // --- Repeatable Rows ---
                let centerCount = 1;
                let sideCount = 1;

                $('#add_center_stone').on('click', function() {
                    if (centerCount >= 3) return alert('Max 3 center stones allowed');
                    centerCount++;
                    let clone = $('.center-stone-row:first').clone();
                    clone.find('input, select').val('');
                    clone.append('<span class="remove-row">🗑</span>');
                    $('#center_stone_rows').append(clone);
                });

                $('#add_side_stone').on('click', function() {
                    if (sideCount >= 10) return alert('Max 10 side stones allowed');
                    sideCount++;
                    let clone = $('.side-stone-row:first').clone();
                    clone.find('input, select').val('');
                    clone.append('<span class="remove-row">🗑</span>');
                    $('#side_stone_rows').append(clone);
                });

                $(document).on('click', '.remove-row', function() {
                    $(this).closest('.stone-row').remove();
                });
            });
        </script>
    @endpush --}}

    @push('scripts')
        <script>
            $(document).ready(function() {

                // --- Restore section visibility on page load ---
                if ($('#toggle_center_stone').val() === '1') {
                    $('#center_stone_rows').removeClass('hidden');
                }
                if ($('#toggle_side_stone').val() === '1') {
                    $('#side_stone_rows').removeClass('hidden');
                }

                // --- Engraving Logic ---
                $('#engraving_font').on('change', function() {
                    if ($(this).val() === '') {
                        $('#engraving_text').val('').prop('disabled', true).addClass('disabled-input');
                    } else {
                        $('#engraving_text').prop('disabled', false).removeClass('disabled-input');
                    }
                }).trigger('change');

                $('#engraving_text').on('input', function() {
                    if ($(this).val().length > 0 && $('#engraving_font').val() === 'N/A') {
                        $('#engraving_font').val('Freestyle Script');
                    }
                });

                // --- Toggle Logic ---
                $('#toggle_center_stone').on('change', function() {
                    $('#center_stone_rows').toggleClass('hidden', $(this).val() === '0');
                });

                $('#toggle_side_stone').on('change', function() {
                    $('#side_stone_rows').toggleClass('hidden', $(this).val() === '0');
                });

                // --- Repeatable Rows ---
                let centerCount = $('#center_stone_rows .center-stone-row').length;
                let sideCount = $('#side_stone_rows .side-stone-row').length;

                // Add Center Stone
                $('#add_center_stone').on('click', function() {
                    if (centerCount >= 10) return alert('Max 10 center stones allowed');
                    centerCount++;

                    let clone = $('.center-stone-row:first').clone();
                    clone.attr('data-index', centerCount);
                    clone.find('input, select').val(''); // clear values
                    clone.find('.remove-row').remove(); // remove previous remove button if any
                    clone.append('<span class="remove-row" style="cursor:pointer; color:red;">🗑</span>');

                    $('#center_stone_rows').append(clone);
                });

                // Add Side Stone
                $('#add_side_stone').on('click', function() {
                    if (sideCount >= 10) return alert('Max 10 side stones allowed');
                    sideCount++;

                    let clone = $('.side-stone-row:first').clone();
                    clone.attr('data-index', sideCount);
                    clone.find('input, select').val('');
                    clone.find('.remove-row').remove();
                    clone.append('<span class="remove-row" style="cursor:pointer; color:red;">🗑</span>');

                    $('#side_stone_rows').append(clone);
                });

                // Remove Row
                $(document).on('click', '.remove-row', function() {
                    $(this).closest('.stone-row').remove();

                    // Update counts and indexes after removal
                    centerCount = $('#center_stone_rows .center-stone-row').length;
                    sideCount = $('#side_stone_rows .side-stone-row').length;

                    $('#center_stone_rows .center-stone-row').each(function(i) {
                        $(this).attr('data-index', i + 1);
                    });
                    $('#side_stone_rows .side-stone-row').each(function(i) {
                        $(this).attr('data-index', i + 1);
                    });
                });

            });
        </script>
    @endpush
@endsection