@extends('adminlte::page')

@section('title', 'Golf')
<style>
    .updateBtn{
        position: fixed;
        bottom: 40px;
        right: 60px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    .note-editor.note-frame .note-editing-area .note-editable{
        height: 150px;
    }
</style>
@section('content_header')
@stop

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Golf</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item active">Golf & Sports</li>
                    <li class="breadcrumb-item active">Golf</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title mb-0">Add/Edit Golf</h4>
            </div>
            <form id="edit_golf_frm" action="{{ route('admin.updateGolf') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="card-body">
                    <!-- Golf Main Description -->
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Golf Main Description <span class="text-danger">*</span></label>
                                <textarea class="form-control summernote description" name="description" id="description">
                                    @if(!empty($golf_arr)){!! $golf_arr['description'] !!} @endif
                                </textarea>
                                <p id="descriptionErr" class="text-danger descriptionErr" style="font-style: italic; font-size: small;"></p>
                            </div>
                        </div>
                    </div>

                    <!-- Golf Sections -->
                    <div id="golf-sections-container">
                        <label class="form-label">Golf Sections <span class="text-danger">*</span></label>
                        
                        @if(!empty($golf_arr))
                            @foreach($golf_arr['golf_sections'] as $section)
                                <div class="section-wrapper mb-4 border p-3" data-id="{{ $section['id'] }}">
                                    <input type="hidden" name="section_ids[]" value="{{ $section['id'] }}">
                                    
                                    <div class="row">
                                        <!-- Title -->
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Section Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control section_title" 
                                                    name="section_title[{{ $section['id'] }}]" 
                                                    value="{{ $section['section_title'] }}">
                                                
                                                <p id="sectionTitleErr" class="text-danger sectionTitleErr" style="font-style: italic; font-size: small;"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <!-- Description -->
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label>Section Description <span class="text-danger">*</span></label>
                                                <textarea class="form-control summernote section_description" 
                                                        name="section_description[{{ $section['id'] }}]">
                                                    {!! $section['section_description'] !!}
                                                </textarea>
                                                <p id="sectionDescriptionErr" class="text-danger sectionDescriptionErr" style="font-style: italic; font-size: small;"></p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Image (Optional) -->
                                    <div class="form-group mt-2">
                                        <label>Section Image <small class="text-muted">(optional)</small></label>

                                        {{-- Hidden: existing image name (passed when no new file chosen) --}}
                                        <input type="hidden"
                                            name="section_image_name[{{ $section['id'] }}]"
                                            value="{{ $section['section_image'] }}"
                                            class="existing-image-name">

                                        {{-- Hidden: delete flag (1 = delete image, set by JS) --}}
                                        <input type="hidden"
                                            name="delete_section_image[{{ $section['id'] }}]"
                                            value="0"
                                            class="delete-image-flag">

                                        {{-- File input for new upload --}}
                                        <div>
                                            <input type="file"
                                                class="section_image"
                                                name="section_image_existing[{{ $section['id'] }}]"
                                                accept="image/jpeg,image/png,image/jpg,image/webp"
                                                onchange="previewNewImage(event, this)">
                                        </div>

                                        {{-- Existing image preview --}}
                                        @if(!empty($section['section_image']))
                                        <div class="mt-2 existing-image-preview-wrap" id="existing-img-wrap-{{ $section['id'] }}">
                                            <p class="mb-1 text-muted" style="font-size:12px;">Current Image:</p>
                                            <img src="{{ asset('storage/distribution/images/golf_section_image/' . $section['section_image']) }}"
                                                alt="Existing"
                                                class="img-fluid"
                                                style="max-height:100px; border:1px solid #ddd; border-radius:4px; padding:2px;">
                                            <br>
                                            <button type="button"
                                                class="btn btn-danger btn-sm mt-1 delete-section-image-btn"
                                                data-id="{{ $section['id'] }}"
                                                title="Remove this image (saves as empty)">
                                                <i class="fas fa-trash-alt"></i> Delete Image
                                            </button>
                                        </div>
                                        @else
                                        <div class="mt-1 existing-image-preview-wrap" id="existing-img-wrap-{{ $section['id'] }}"></div>
                                        @endif

                                        {{-- New image preview --}}
                                        <img src="" class="img-fluid new-preview mt-2" style="max-height:100px; display:none; border:1px solid #ddd; border-radius:4px; padding:2px;">

                                        <p class="text-danger sectionImageErr" style="font-style: italic; font-size: small;"></p>
                                    </div>

                                    <div>
                                        <label>Has Multiple Tab</label>(optional)
                                        <select class="form-control" name="has_multiple_tab[{{ $section['id'] }}]">
                                            <option value="0" {{ $section['has_multiple_tab'] == 0 ? 'selected' : '' }}>No</option>
                                            <option value="1" {{ $section['has_multiple_tab'] == 1 ? 'selected' : '' }}>Yes</option>
                                        </select>
                                    </div>


                                    <button type="button" class="btn btn-danger btn-sm mt-2 remove-existing-section" data-id="{{ $section['id'] }}">Delete Section</button>
                                </div>
                            @endforeach
                        @endif
                    </div>

                    <input type="hidden" name="delete_sections" id="delete_sections">

                    <!-- Add Section Button -->
                    <button type="button" class="btn btn-sm btn-primary mt-2" id="addSectionBtn">+ Add Section</button>
                    <!-- <p class="text-muted mt-2">Exactly 8 sections are required.</p> -->
                </div>

                <!-- Form Footer -->
                <div class="card-footer">
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('admin.showGolf') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" id="save_golf" class="btn btn-success updateBtn"><span>Update</span></button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <!-- /.container-fluid -->

</section>
<!-- /.content -->

<!-- /.content-wrapper -->

<style>
    .select2-container--default .select2-selection--single {
        height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }

    .highlighted-product {
        gap: 16px;
    }

    .highlighted-product-column {
        padding: 0px 20px;
        border-radius: 8px;
        border: 1px solid #D9D9D9;
        width: 100%;
        max-width: 497px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 54px;
        height: 27px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked+.slider {
        background-color: #24BC4A;
    }

    input:checked+.slider:before {
        transform: translateX(26px);
    }

    .slider.round {
        border-radius: 34px;
    }

    .slider.round:before {
        border-radius: 50%;
    }
</style>
@stop


@section('js')

    <!-- <script>
        $(document).ready(function() {
            // Initialize Summernote with height adjustment
            $('.summernote').summernote({
                height: 250,  // Set height for Summernote editor
            });
        });
    </script> -->
    @include('admin.summernote-editor')


@include('admin.golf.scripts.index')
@stop