@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit Ticker</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">Ticker Management</li>
                    <li class="breadcrumb-item active">Edit Ticker</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        {{-- important: enctype is required for file uploads --}}
        <form id="edit_ticker_frm" action="{{ route('admin.homeCmsTickerUpdate', $ticker->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Edit Ticker</h3>
                </div>
                <br>

                <div class="card-body">
                    <div class="form-group">
                        <label for="title">Title</label>
                        <input 
                            type="text" 
                            name="title" 
                            id="title_id" 
                            class="form-control title" 
                            value="{{ old('title', $ticker->title) }}"
                        >
                        <p id="titleEditErr" class="text-danger titleEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <!-- <textarea 
                            name="description" 
                            id="description_id" 
                            class="form-control summernote description" 
                            rows="4"
                        >{{ old('description', $ticker->description) }}</textarea> -->
                        <textarea 
                            name="description" 
                            id="description_id" 
                            class="form-control  description" 
                            rows="4"
                        >{{ old('description', $ticker->description) }}</textarea>
                        <p id="descriptionEditErr" class="text-danger descriptionEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="image">Ticker Image</label>
                        <input 
                            type="file" 
                            name="image" 
                            id="image_edit" 
                            class="form-control-file image" onchange="previewImage(event)">

                        <small class="text-muted">Allowed types: jpeg, png, jpg, webp</small>
                        <p id="imageEditErr" class="text-danger imageEditErr" style="font-style: italic; font-size: small;"></p>

                        {{--<div class="mt-2">
                        @if ($ticker->image)
                            
                            <!-- <p><strong>Current Image:</strong></p> -->
                            <img 
                                src="{{ asset('storage/distribution/images/ticker_image/' . $ticker->image) }}" 
                                alt="Ticker Image" 
                                class="img-thumbnail" 
                                style="max-width: 250px;">
                            
                        @endif

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <!-- <div class="mt-2"> -->
                            <!-- <p><strong>New Image Preview:</strong></p> -->
                            <img 
                                id="imagePreviewEdit" 
                                src="#" 
                                alt="Preview" 
                                style="display:none; max-width: 250px; border: 1px solid #ddd; border-radius: 6px; padding: 4px;"
                            >
                        <!-- </div> -->

                        </div>  --}}

                        <div class="mt-2 d-flex gap-2">
                            @if ($ticker->image)
                            <img src="{{ asset('storage/distribution/images/ticker_image/' . $ticker->image) }}" 
                                alt="Existing Image" class="img-fluid" style="max-width: 250px;">
                            @endif
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <img src="" id="image_preview_edit" class="img-fluid new-preview" style="display:none; max-width: 250px; border: 1px solid #ddd; border-radius: 6px; padding: 4px;">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="link">Link</label>
                        <input 
                            type="url" 
                            name="link" 
                            id="link_id" 
                            class="form-control link" 
                            value="{{ old('link', $ticker->link) }}"
                        >
                        <p id="linkEditErr" class="text-danger linkEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="start_date_time">Start Date & Time</label>
                        <input 
                            type="datetime-local" 
                            name="start_date_time" 
                            id="start_date_time_id" 
                            class="form-control start_date_time" 
                            value="{{ old('start_date_time', \Carbon\Carbon::parse($ticker->start_date_time)->format('Y-m-d\TH:i')) }}"
                        >
                        <p id="start_date_timeEditErr" class="text-danger start_date_timeEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="end_date_time">End Date & Time</label>
                        <input 
                            type="datetime-local" 
                            name="end_date_time" 
                            id="end_date_time_id" 
                            class="form-control end_date_time" 
                            value="{{ old('end_date_time', \Carbon\Carbon::parse($ticker->end_date_time)->format('Y-m-d\TH:i')) }}"
                        >
                        <p id="end_date_timeEditErr" class="text-danger end_date_timeEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="visibility">Visibility</label>
                        <select name="visibility" id="visibility_edit" class="form-control visibility">
                            <option value="public" {{ old('visibility', $ticker->visibility) == 'public' ? 'selected' : '' }}>Public</option>
                            <option value="private" {{ old('visibility', $ticker->visibility) == 'private' ? 'selected' : '' }}>Private</option>
                        </select>
                        <p id="visibilityEditErr" class="text-danger visibilityEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>

                    <div class="form-group">
                        <label for="status">Status</label>
                        <select name="status" id="status_edit" class="form-control status">
                            <option value="active" {{ old('status', $ticker->status) == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ old('status', $ticker->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                        <p id="statusEditErr" class="text-danger statusEditErr" style="font-style: italic; font-size: small;"></p>
                    </div>
                </div>

                <div class="card-footer">
                    <!-- <button type="submit" class="btn btn-primary"><span>Update Ticker</span></button> -->
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('admin.homeCmsTickers') }}" class="btn btn-secondary">Cancel</a>
                        <button type="submit" id="edit_ticker" class="btn btn-success"><span>Update Ticker</span></button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

@stop


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

    function previewImage(event) {
        const output = document.getElementById('image_preview_edit');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.style.display = 'block';
    }
</script>
@include('admin.home-cms.tickers.scripts.index')
@stop