@extends('layouts.admin.main')
@section('title', 'Home Page Banner Settings')
@section('style')
    <link href="{{ asset('assets/plugins/switchery/switchery.min.css') }}" rel="stylesheet" type="text/css">
@endsection

@section('rightbar-content')

    <div class="breadcrumbbar">
        <div class="row align-items-center">
            <div class="col-md-8 col-lg-8">
                <h4 class="page-title">Home Page Banner Settings</h4>
                <div class="breadcrumb-list">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('adminWords.home') }}</a></li>
                        <li class="breadcrumb-item"><a href="#">Home Page Banner Settings</a></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="contentbar">
        <div class="row">
            <div class="col-lg-12">
                <div class="card m-b-30">
                    <div class="card-header">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <h5 class="card-title mb-0">Home Page Banner Section</h5>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="admin-form">
                                    {!! Form::open([
                                        'method' => 'POST',
                                        'files' => true,
                                        'route' => ['home_page_settings.update'],
                                        'id' => 'homePageSettingsForm',
                                    ]) !!}

                                    <!-- Background Image Field -->
                                    <div class="form-group{{ $errors->has('background_image') ? ' has-error' : '' }}">
                                        <label for="background_image">Background Image{!! empty($homePageSettings) ? '<sup>*</sup>' : '' !!}</label>
                                        @if (!empty($homePageSettings) && isset($homePageSettings->background_image))
                                            <div class="mb-2">
                                                <div class="mb-2">
                                                    <img src="{{ asset('images/home_page/' . $homePageSettings->background_image) }}"
                                                        class="img-thumbnail" style="max-width: 300px; max-height: 200px;">
                                                </div>
                                        @endif
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="background_image" <input
                                                type="file" class="custom-file-input" id="background_image"
                                                name="background_image" accept="image/*"
                                                {{ empty($homePageSettings) ? 'required' : '' }}>
                                            <label class="custom-file-label" for="background_image">Choose file</label>
                                        </div>
                                        <small class="text-muted">Recommended size: 1920x1080 pixels</small>
                                        <div id="backgroundImagePreview" class="mt-2"></div>
                                        <small class="text-danger">{{ $errors->first('background_image') }}</small>
                                    </div>

                                    <!-- Tagline Text Field -->
                                    <div class="form-group{{ $errors->has('tagline_text') ? ' has-error' : '' }}">
                                        <label for="tagline_text">Tagline Text<sup>*</sup></label>
                                        {!! Form::text('tagline_text', isset($homePageSettings->tagline_text) ? $homePageSettings->tagline_text : null, [
                                            'class' => 'form-control require',
                                            'id' => 'tagline_text',
                                            'required',
                                            'placeholder' => 'Enter tagline text',
                                        ]) !!}
                                        <small class="text-danger">{{ $errors->first('tagline_text') }}</small>
                                    </div>

                                    <!-- URL Field -->
                                    <div class="form-group{{ $errors->has('url') ? ' has-error' : '' }}">
                                        <label for="url">URL (Program/Presenter Link)<sup>*</sup></label>
                                        {!! Form::text('url', isset($homePageSettings->url) ? $homePageSettings->url : null, [
                                            'class' => 'form-control require',
                                            'id' => 'url',
                                            'required',
                                            'placeholder' => 'https://example.com/program-or-presenter',
                                        ]) !!}
                                        <small class="text-muted">Enter the full URL for the program or presenter
                                            page</small>
                                        <small class="text-danger">{{ $errors->first('url') }}</small>
                                    </div>

                                    <!-- Program Name Field -->
                                    <div class="form-group{{ $errors->has('program_name') ? ' has-error' : '' }}">
                                        <label for="program_name">Program Name<sup>*</sup></label>
                                        {!! Form::text('program_name', isset($homePageSettings->program_name) ? $homePageSettings->program_name : null, [
                                            'class' => 'form-control require',
                                            'id' => 'program_name',
                                            'required',
                                            'placeholder' => 'Enter program name',
                                        ]) !!}
                                        <small class="text-danger">{{ $errors->first('program_name') }}</small>
                                    </div>

                                    <!-- Host Image Upload Field -->
                                    <div class="form-group{{ $errors->has('host_image') ? ' has-error' : '' }}">
                                        <label for="host_image">Host Image{!! empty($homePageSettings) ? '<sup>*</sup>' : '' !!}</label>
                                        @if (!empty($homePageSettings) && isset($homePageSettings->host_image))
                                            <div class="mb-2">
                                                <div class="mb-2">
                                                    <img src="{{ asset('images/home_page/' . $homePageSettings->host_image) }}"
                                                        class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                                                </div>
                                        @endif
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="host_image" <input
                                                type="file" class="custom-file-input" id="host_image" name="host_image"
                                                accept="image/*" {{ empty($homePageSettings) ? 'required' : '' }}>
                                            <label class="custom-file-label" for="host_image">Choose file</label>
                                        </div>
                                        <small class="text-muted">Recommended size: 500x500 pixels (square)</small>
                                        <div id="hostImagePreview" class="mt-2"></div>
                                        <small class="text-danger">{{ $errors->first('host_image') }}</small>
                                    </div>

                                    <div class="form-group">
                                        <button type="button" class="btn btn-primary" data-action="submitThisForm"><i
                                                class="feather icon-check-circle"></i>
                                            {{ !empty($homePageSettings) ? 'Update Settings' : 'Save Settings' }}</button>
                                        @if (empty($homePageSettings))
                                            <button type="reset" class="btn btn-danger"><i class="fa fa-ban"></i>
                                                Reset</button>
                                        @endif
                                    </div>
                                    <div class="clear-both"></div>
                                    {!! Form::close() !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{{ asset('assets/plugins/switchery/switchery.min.js') }}"></script>
    <script src="{{ asset('assets/js/mrcls-custom.js') }}"></script>
    <script>
        // Custom file input label update
        document.querySelectorAll('.custom-file-input').forEach(function(input) {
            input.addEventListener('change', function(e) {
                var fileName = e.target.files[0] ? e.target.files[0].name : 'Choose file';
                var label = e.target.nextElementSibling;
                label.textContent = fileName;

                // Image preview
                if (e.target.files && e.target.files[0]) {
                    var reader = new FileReader();
                    var previewId = e.target.id === 'background_image' ? 'backgroundImagePreview' :
                        'hostImagePreview';

                    reader.onload = function(e) {
                        document.getElementById(previewId).innerHTML = '<img src="' + e.target.result +
                            '" class="img-thumbnail" style="max-width: 300px; max-height: 200px;">';
                    }

                    reader.readAsDataURL(e.target.files[0]);
                }
            });
        });
    </script>
@endsection