@extends('layouts.app')

@section('content')
    <section class="content">
        <div class="card card-primary card-outline card-outline-tabs">
            <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link {{ isset($list) ? 'active' : '' }}"
                            href="{{ route('home.index') . qString() }}">
                            <i class="bi bi-list-ol"></i> Home Content
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{ isset($create) ? 'active' : '' }}"
                            href="{{ route('home.create') . qString() }}">
                            <i class="bi bi-plus-circle"></i> Add Home Content
                        </a>
                    </li>
                    @if (isset($edit))
                        <li class="nav-item">
                            <a class="nav-link active" href="#">
                                <i class="bi bi-pencil-square"></i> Edit Home Content
                            </a>
                        </li>
                    @endif
                    @if (isset($show))
                        <li class="nav-item">
                            <a class="nav-link active" href="#" role="tab">
                                <i class="bi bi-eye-fill"></i> Home Content Details
                            </a>
                        </li>
                    @endif
                </ul>
            </div>

            <div class="card-body">
                <div class="tab-content" id="custom-tabs-four-tabContent">
                    @if (isset($list))
                        <div class="tab-pane fade show active" role="tabpanel">
                            <div class="card">
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th>Highlight Title</th>
                                                    <th>Tagline</th>
                                                    <th>Tagline Title</th>
                                                    <th style="width: 90px">Action</th>
                                                </tr>
                                            </thead>
                                            
                                            @if(isset($record))
                                                <tbody>
                                                    <tr>
                                                        <td>{{ $record->highlight_title }}</td>
                                                        <td>{{ $record->tagline }}</td>
                                                        <td>{{ $record->title }}</td>
                                                        <td class="text-center action-button px-0">
                                                            <div class="btn-group" role="group">
                                                                <a href="{{ route('home.show', $record->id) . qString() }}" class="btn" data-toggle="tooltip" data-placement="top" title="Details">
                                                                    <i class="bi bi-eye-fill"></i>
                                                                </a>
                                                                <a href="{{ route('home.edit', $record->id).qString() }}" class="btn" data-toggle="tooltip" data-placement="top" title="Edit">
                                                                    <i class="bi bi-pencil-square"></i>
                                                                </a>
                                                                <form id="delete-form-{{ $record->id }}" action="{{ route('home.destroy', $record->id) }}" method="POST" enctype="multipart/form-data">
                                                                    @csrf
                                                                    @method('DELETE')
                                                                    <button type="button" class="btn delete-button rounded-0" data-record-id="{{ $record->id }}" data-toggle="tooltip" data-placement="top" title="Delete">
                                                                        <i class="bi bi-trash-fill"></i>
                                                                    </button>
                                                                </form>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            @endif
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @elseif(isset($show))
                        <div class="tab-pane active" role="tabpanel">
                            <div class="card">
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-sm mb-0">
                                            <thead>
                                                <tr>
                                                    <th style="width: 200px">Fields</th>
                                                    <th style="width: 20px">:</th>
                                                    <th>Values</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <th>Counters</th>
                                                    <th>:</th>
                                                    <td>
                                                        <ol>
                                                            @foreach($record->counter_title ?? [] as $ct_key => $title)
                                                                <li>{{ $title }} (<b>{{ $record->counter[$ct_key]}}+</b>)</li>
                                                            @endforeach
                                                        </ol>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Highlight Title</th>
                                                    <th>:</th>
                                                    <td>{{ $record->highlight_title }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Highlight Content 1</th>
                                                    <th>:</th>
                                                    <td>{{ $record->highlight_content_1 }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Highlight Image 1</th>
                                                    <th>:</th>
                                                    <td>
                                                        <img src="{{ asset('storage/home/' . $record->highlight_image_1) }}" alt="Highlight Image 1" style="max-height: 300px; width: auto;">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Highlight Content 2</th>
                                                    <th>:</th>
                                                    <td>{{ $record->highlight_content_2 }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Highlight Image 2</th>
                                                    <th>:</th>
                                                    <td>
                                                        <img src="{{ asset('storage/home/' . $record->highlight_image_2) }}" alt="Highlight Image 2" style="max-height: 300px; width: auto;">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <th>Who We Are</th>
                                                    <th>:</th>
                                                    <td>{{ $record->who_we_are }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Why Choose Us</th>
                                                    <th>:</th>
                                                    <td>{{ $record->why_choose_us }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Tagline</th>
                                                    <th>:</th>
                                                    <td>{{ $record->tagline }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Title</th>
                                                    <th>:</th>
                                                    <td>{{ $record->title }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Description</th>
                                                    <th>:</th>
                                                    <td>{{ $record->description }}</td>
                                                </tr>
                                                <tr>
                                                    <th>Background Image</th>
                                                    <th>:</th>
                                                    <td>
                                                        <img src="{{ asset('storage/home/' . $record->background_image) }}" alt="Background Image" style="max-height: 300px; width: auto;">
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @elseif(isset($edit) || isset($create))
                        <div class="tab-pane active">
                            <div class="card">
                                <div class="card-body">
                                    <form method="POST" action="{{ isset($edit) ? route('home.update', $edit) : route('home.store') }}{{ qString() }}" id="are_you_sure" class="form-horizontal" enctype="multipart/form-data">
                                        @csrf

                                        @if (isset($edit))
                                            @method('PUT')
                                        @endif
                                        
                                        <input type="hidden" name="id" value="1">

                                        <div class="row">
                                            <div class="col-sm-11">
                                                <div class="form-group row">
                                                    <label class="col-sm-3 col-form-label">Counters:</label>
                                                    <div class="col-sm-9" id="counterBox">
                                                        @php
                                                            $counters = old('counter', isset($record) ? $record->counter ?? [''] : ['']);
                                                            $counter_titles = old('counter_title', isset($record) ? $record->counter_title ?? [''] : ['']);
                                                            $rows = max(count($counters), count($counter_titles));
                                                        @endphp
                                                
                                                        @for ($i = 0; $i < max(1, $rows); $i++)
                                                            <div class="input-group mb-2" id="counter_row_{{ $i }}">
                                                                <input type="text" class="form-control me-2" name="counter[]" value="{{ $counters[$i] ?? '' }}" placeholder="Counter..." autocomplete="off">
                                                                <input type="text" class="form-control me-2" name="counter_title[]" value="{{ $counter_titles[$i] ?? '' }}" placeholder="Title..." autocomplete="off" style="width: 50%;">
                                                
                                                                @if ($i == 0)
                                                                    <span class="input-group-text bg-success text-white addCounter" style="cursor: pointer;">
                                                                        <i class="bi bi-plus-lg"></i>
                                                                    </span>
                                                                @else
                                                                    <span class="input-group-text bg-danger text-white removeCounter" data-id="{{ $i }}" style="cursor: pointer;">
                                                                        <i class="bi bi-dash-lg"></i>
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        @endfor
                                                
                                                        @error('counter.*')
                                                            <span class="text-danger d-block">{{ $message }}</span>
                                                        @enderror
                                                        @error('counter_title.*')
                                                            <span class="text-danger d-block">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('home_description') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Home Description :</label>
                                                    <div class="col-sm-9">
                                                        <textarea class="form-control summernote" name="home_description" rows="10" required>{{ old('home_description', isset($record) ? $record->home_description : '') }}</textarea>

                                                        @if ($errors->has('home_description'))
                                                            <span class="help-block">{{ $errors->first('home_description') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('highlight_title') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Highlight Title :</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" name="highlight_title" value="{{ old('highlight_title', isset($record) ? $record->highlight_title : '') }}" required>

                                                        @if ($errors->has('highlight_title'))
                                                            <span class="help-block">{{ $errors->first('highlight_title') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('highlight_content_1') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Highlight Content 1 :</label>
                                                    <div class="col-sm-9">
                                                        <textarea class="form-control summernote" name="highlight_content_1" rows="5" required>{{ old('highlight_content_1', isset($record) ? $record->highlight_content_1 : '') }}</textarea>

                                                        @if ($errors->has('highlight_content_1'))
                                                            <span class="help-block">{{ $errors->first('highlight_content_1') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('highlight_image_1') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Highlight Image 1 :</label>
                                                    <div class="col-sm-9">
                                                        <input type="file" class="form-control" name="highlight_image_1" onchange="readURL(this)" {{ isset($edit) ? '' : 'required' }}>
                                                        <small class="form-text text-muted">
                                                            @if ($errors->has('highlight_image_1'))
                                                                {{ $errors->first('highlight_image_1') }}
                                                            @else
                                                                Width-Auto X Height-Auto
                                                                @if (isset($edit))
                                                                    / <a href="{{ asset('storage/home/' . $record->highlight_image_1) }}" target="_blank">{{ $record->highlight_image_1 }}</a>
                                                                @endif
                                                            @endif
                                                        </small>
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('highlight_content_2') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Highlight Content 2 :</label>
                                                    <div class="col-sm-9">
                                                        <textarea class="form-control summernote" name="highlight_content_2" rows="5" required>{{ old('highlight_content_2', isset($record) ? $record->highlight_content_2 : '') }}</textarea>

                                                        @if ($errors->has('highlight_content_2'))
                                                            <span class="help-block">{{ $errors->first('highlight_content_2') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('highlight_image_2') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Highlight Image 2 :</label>
                                                    <div class="col-sm-9">
                                                        <input type="file" class="form-control" name="highlight_image_2" onchange="readURL(this)" {{ isset($edit) ? '' : 'required' }}>
                                                        <small class="form-text text-muted">
                                                            @if ($errors->has('highlight_image_2'))
                                                                {{ $errors->first('highlight_image_2') }}
                                                            @else
                                                                Width-Auto X Height-Auto
                                                                @if (isset($edit))
                                                                    / <a href="{{ asset('storage/home/' . $record->highlight_image_2) }}" target="_blank">{{ $record->highlight_image_2 }}</a>
                                                                @endif
                                                            @endif
                                                        </small>
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('who_we_are') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Who We Are :</label>
                                                    <div class="col-sm-9">
                                                        <textarea class="form-control summernote" name="who_we_are" rows="5" required>{{ old('who_we_are', isset($record) ? $record->who_we_are : '') }}</textarea>

                                                        @if ($errors->has('who_we_are'))
                                                            <span class="help-block">{{ $errors->first('who_we_are') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('why_choose_us') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Why Choose Us :</label>
                                                    <div class="col-sm-9">
                                                        <textarea class="form-control summernote" name="why_choose_us" rows="5" required>{{ old('why_choose_us', isset($record) ? $record->why_choose_us : '') }}</textarea>

                                                        @if ($errors->has('why_choose_us'))
                                                            <span class="help-block">{{ $errors->first('why_choose_us') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('tagline') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Tagline :</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" name="tagline" value="{{ old('tagline', isset($record) ? $record->tagline : '') }}" required>

                                                        @if ($errors->has('tagline'))
                                                            <span class="help-block">{{ $errors->first('tagline') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('title') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Title :</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" name="title" value="{{ old('title', isset($record) ? $record->title : '') }}" required>

                                                        @if ($errors->has('title'))
                                                            <span class="help-block">{{ $errors->first('title') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('description') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Description :</label>
                                                    <div class="col-sm-9">
                                                        <textarea class="form-control summernote" name="description" rows="5" required>{{ old('description', isset($record) ? $record->description : '') }}</textarea>

                                                        @if ($errors->has('description'))
                                                            <span class="help-block">{{ $errors->first('description') }}</span>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="form-group row {{ $errors->has('background_image') ? ' has-error' : '' }}">
                                                    <label class="col-sm-3 col-form-label required">Background Image :</label>
                                                    <div class="col-sm-9">
                                                        <input type="file" class="form-control" name="background_image" onchange="readURL(this)" {{ isset($edit) ? '' : 'required' }}>
                                                        <small class="form-text text-muted">
                                                            @if ($errors->has('background_image'))
                                                                {{ $errors->first('background_image') }}
                                                            @else
                                                                Width-Auto X Height-Auto
                                                                @if (isset($edit))
                                                                    / <a href="{{ asset('storage/home/' . $record->background_image) }}" target="_blank">{{ $record->background_image }}</a>
                                                                @endif
                                                            @endif
                                                        </small>
                                                    </div>
                                                </div>

                                                <div class="form-group text-center">
                                                    <button type="submit" class="btn btn-success" style="width: 100px;">
                                                        <i class="bi bi-plus-circle"></i> {{ isset($edit) ? 'Update' : 'Create' }}
                                                    </button>

                                                    <button type="reset" class="btn btn-info" style="width: 100px;">
                                                        <i class="bi bi-arrow-repeat"></i> Reset
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="col-sm-3 text-center"></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        let counterIndex = {{ $rows ?? 1 }};
    
        $(document).on('click', '.addCounter', function () {
            $('#counterBox').append(`
                <div class="input-group mb-2" id="counter_row_${counterIndex}">
                    <input type="text" class="form-control me-2" name="counter[]" placeholder="Counter..." autocomplete="off">
                    <input type="text" class="form-control me-2" name="counter_title[]" placeholder="Title..." autocomplete="off" style="width: 50%;">
                    <span class="input-group-text bg-danger text-white removeCounter" data-id="${counterIndex}" style="cursor: pointer;">
                        <i class="bi bi-dash-lg"></i>
                    </span>
                </div>
            `);
            counterIndex++;
        });
        
        $(document).on('click', '.removeCounter', function () {
            const id = $(this).data('id');
            $(`#counter_row_${id}`).remove();
        });
    </script>
@endpush