@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>Edit Bespoke 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">Edit Intake</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <form action="{{ route('custom.intake.update', $obj->id) }}" method="POST" enctype="multipart/form-data"
                class="needs-validation" novalidate>
                @csrf
                @method('PUT')
                <div class="row product-adding">
                    {{-- Left Column --}}

                    <div class="col-xl-6">

                        <div class="card">
                            <div class="card-header d-flex flex-column align-items-start">
                                <h3 class="mb-2">Intake #{{ $obj->id }}</h3>
                                <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', $obj->sales_person_name) }}"
                                        placeholder="Please Enter Sales Person Name" required>
                                    @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', $obj->customer_name) }}"
                                        placeholder="Please Enter Customer Name" required>
                                    @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', $obj->street_address) }}"
                                        placeholder="Please Enter Street Address" required>
                                    @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', $obj->city) }}" placeholder="Please Enter City" required>
                                    @error('city')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                {{-- {{ dd($states) }} --}}

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

                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}"
                                                {{ old('state', $obj->id) == $state->id ? 'selected' : '' }}>
                                                {{ ucfirst($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', $obj->zip) }}" placeholder="Please Enter Zip" required>
                                    @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', $obj->email) }}" placeholder="Please Enter Email Address"
                                        required>
                                    @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', $obj->phone) }}" placeholder="Please Enter Phone Number"
                                        required>
                                    @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', $obj->intake_date) }}"
                                        placeholder="Please Enter Intake Date">
                                    @error('intake_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Product Details --}}
                        <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="{{ $font->id }}"
                                                {{ old('engraving_font', $obj->engraving_font) == $font->id ? 'selected' : '' }}>
                                                {{ $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', $obj->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', $obj->ring_size) == $i ? 'selected' : '' }}>
                                                {{ $i }}</option>
                                        @endfor
                                    </select>
                                </div>

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

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

                                        <option value="1" {{ old('color', $obj->color) == 1 ? 'selected' : '' }}>
                                            White</option>
                                        <option value="2" {{ old('color', $obj->color) == 2 ? 'selected' : '' }}>
                                            Yellow</option>
                                        <option value="3" {{ old('color', $obj->color) == 3 ? 'selected' : '' }}>Rose
                                        </option>

                                        <option value="7" {{ old('color', $obj->color) == 7 ? 'selected' : '' }}>
                                            Platinum</option>

                                        <option value="14" {{ old('color', $obj->color) == 14 ? 'selected' : '' }}>
                                            Rose/Yellow</option>
                                        <option value="15" {{ old('color', $obj->color) == 15 ? 'selected' : '' }}>
                                            Rose/White</option>
                                        <option value="16" {{ old('color', $obj->color) == 16 ? 'selected' : '' }}>
                                            Rose/Yellow/White</option>
                                        <option value="17" {{ old('color', $obj->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" required>{{ old('product_description', $obj->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', $obj->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>
                                    {{-- @if ($obj->attachments && $obj->attachments->count() > 0)
                                        <div class="mt-3">
                                            <label class="form-label fw-bold">Existing Attachments:</label>
                                            <div class="d-flex flex-wrap gap-3">
                                                @foreach ($obj->attachments as $att)
                                                    <div class="border rounded p-2 text-center" style="width:100px;">
                                                        <a href="{{ $att->file_path }}" target="_blank">
                                                            <img src="{{ $att->file_path }}" alt="{{ $att->file_name }}"
                                                                class="img-fluid rounded mb-1"
                                                                style="height:60px; object-fit:cover;">
                                                        </a>
                                                        <div class="small text-truncate" title="{{ $att->file_name }}">
                                                            {{ $att->file_name }}
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif --}}
                                    @if ($obj->attachments && $obj->attachments->count() > 0)
                                        <div class="mt-3">
                                            <label class="form-label fw-bold">Existing Attachments:</label> <br>
                                            <small style="color:red">**To delete an image, please check its corresponding
                                                box.**</small>
                                            <div class="d-flex flex-wrap gap-3">
                                                @foreach ($obj->attachments as $att)
                                                    <div class="border rounded p-2 text-center position-relative"
                                                        style="width:100px;">
                                                        <a href="{{ $att->file_path }}" target="_blank">
                                                            <img src="{{ $att->file_path }}" alt="{{ $att->file_name }}"
                                                                class="img-fluid rounded mb-1"
                                                                style="height:60px; object-fit:cover;">
                                                        </a>

                                                        <div class="small text-truncate" title="{{ $att->file_name }}">
                                                            {{ $att->file_name }}
                                                        </div>
                                                        {{-- Delete Checkbox --}}
                                                        <div class="form-check position-absolute top-0 end-0 m-1">
                                                            <input class="form-check-input delete-attachment"
                                                                type="checkbox" name="deleted_attachments[]"
                                                                value="{{ $att->id }}"
                                                                id="delete{{ $att->id }}">
                                                            <label class="form-check-label text-danger small"
                                                                for="delete{{ $att->id }}">
                                                            </label>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif

                                </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', $obj->price) }}" step="0.01" min="0" required>
                                    @error('price')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- @php
                        dd($obj->centerStones->count());
                    @endphp --}}

                    {{-- 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" {{ $obj->centerStones->count() == 0 ? 'selected' : '' }}>
                                            No Stone</option>
                                        <option value="1" {{ $obj->centerStones->count() > 0 ? 'selected' : '' }}>
                                            Center Stone</option>
                                    </select>
                                </div>

                                <div id="center_stone_rows"
                                    class="{{ $obj->centerStones->count() > 0 ? '' : 'hidden' }}">
                                    @if ($obj->centerStones->count() == 0)
                                        <div class="stone-row center-stone-row">
                                            @include('partials.center-stone-row-edit', ['index' => 1])
                                        </div>
                                    @else
                                        @foreach ($obj->centerStones as $index => $stone)
                                            <div class="stone-row center-stone-row" data-index="{{ $index + 1 }}">
                                                @include('partials.center-stone-row-edit', [
                                                    'stone' => $stone,
                                                    'index' => $index + 1,
                                                ])
                                            </div>
                                        @endforeach
                                    @endif
                                    <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" {{ $obj->sideStones->count() == 0 ? 'selected' : '' }}>No
                                            Stones</option>
                                        <option value="1" {{ $obj->sideStones->count() > 0 ? 'selected' : '' }}>Side
                                            Stones</option>
                                    </select>
                                </div>

                                <div id="side_stone_rows" class="{{ $obj->sideStones->count() > 0 ? '' : 'hidden' }}">

                                    @if ($obj->sideStones->count() == 0)
                                        <div class="stone-row side-stone-row">
                                            @include('partials.side-stone-row-edit', ['index' => 1])
                                        </div>
                                    @else
                                        @foreach ($obj->sideStones as $index => $stone)
                                            <div class="stone-row side-stone-row" data-index="{{ $index + 1 }}">
                                                @include('partials.side-stone-row-edit', [
                                                    'stone' => $stone,
                                                    'index' => $index + 1,
                                                ])
                                            </div>
                                        @endforeach
                                    @endif
                                    <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">Update</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 = $('#center_stone_rows .center-stone-row').length;
                let sideCount = $('#side_stone_rows .side-stone-row').length;
                console.log('Initial Center Stones:', centerCount);
                console.log('Initial Side Stones:', sideCount);
                // 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