@extends('layout.admin.app')

@section('title', $template->title)

@section('content')
<div class="container">
    <div class="row">
        <div class="col-lg-12 mx-auto">
            <!-- Title -->
            <div class="mb-4">
                <h1 class="display-7 fw-bold mb-3">{!! $template->title !!}</h1>
            </div>

            <!-- Important Information -->
            @if(!empty($template->important_info))
                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                  
                    <div class="alert-content">
                        {!! $template->important_info !!}
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <!-- Content Sections -->
            <div class="wrap">
                    <!-- Section 1 -->
                    @if(!empty($template->section_1))
                        <div class="content-section mb-4">
                            {!! $template->section_1 !!}
                        </div>
                    @endif

                    <!-- Section 2 -->
                    @if(!empty($template->section_2))
                        <div class="content-section mb-4">
                            {!! $template->section_2 !!}
                        </div>
                    @endif

                    <!-- Section 3 -->
                    @if(!empty($template->section_3))
                        <div class="content-section mb-4">
                            {!! $template->section_3 !!}
                        </div>
                    @endif

                    <!-- Section 4 -->
                    @if(!empty($template->section_4))
                        <div class="content-section mb-4">
                            {!! $template->section_4 !!}
                        </div>
                    @endif

                    <!-- Section 5 -->
                    @if(!empty($template->section_5))
                        <div class="content-section mb-4">
                            {!! $template->section_5 !!}
                        </div>
                    @endif
                </div>
            </div>

            {{-- MIS Service Dropdown --}}
            @if(!empty($servicesMst) && count($servicesMst) > 0)
                <form method="post" action="{{ route($template->button_link) }}">
                    @csrf
                    <div class="mb-4" id="service-section">
                        <label for="service_id" class="form-label fw-bold">
                            Service Name
                        </label>

                        <select name="service_id" id="service_id" class="form-select">
                            <option value="">-- Select Service --</option>

                            @foreach($servicesMst as $service)
                                <option value="{{ $service['c_serv_id'] }}">
                                    {{ $service['c_serv_long_name'] }}
                                </option>
                            @endforeach
                        </select>
                        @error('service_id')
                            <div class="text-danger mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                
                    <!-- Action Buttons -->
                    <div class="d-flex gap-3 justify-content-between align-items-center">
                        <a href="javascript:history.back()" class="btn btn-secondary btn-lg">
                            <i class="fa-solid fa-arrow-left me-2"></i> Back
                        </a>

                        @if($template->button_link && Route::has($template->button_link))
                            <button type="submit" class="btn btn-success btn-lg">
                                {{ $template->button_text ?? 'Proceed' }}
                                <i class="fa-solid fa-arrow-right ms-2"></i>
                            </button>
                        @else
                            <button class="btn btn-success btn-lg" disabled>
                                {{ $template->button_text ?? 'Proceed' }}
                            </button>
                        @endif
                    </div>
                </form>
            @elseif(!empty($capServicesMst) && count($capServicesMst) > 0)
                <form method="post" action="{{ route($template->button_link) }}">
                    @csrf
                    <div class="mb-4" id="service-section">
                        <label for="service_id" class="form-label fw-bold">
                            Service Name
                        </label>

                        <select name="service_id" id="service_id" class="form-select">
                            <option value="">-- Select Service --</option>

                            @foreach($capServicesMst as $service)
                                <option value="{{ $service['c_serv_id'] }}">
                                    {{ $service['c_serv_long_name'] }}
                                </option>
                            @endforeach
                        </select>
                        @error('service_id')
                            <div class="text-danger mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                
                    <!-- Action Buttons -->
                    <div class="d-flex gap-3 justify-content-between align-items-center">
                        <a href="javascript:history.back()" class="btn btn-secondary btn-lg">
                            <i class="fa-solid fa-arrow-left me-2"></i> Back
                        </a>

                        @if($template->button_link && Route::has($template->button_link))
                            <button type="submit" class="btn btn-success btn-lg">
                                {{ $template->button_text ?? 'Proceed' }}
                                <i class="fa-solid fa-arrow-right ms-2"></i>
                            </button>
                        @else
                            <button class="btn btn-success btn-lg" disabled>
                                {{ $template->button_text ?? 'Proceed' }}
                            </button>
                        @endif
                    </div>
                </form>
            @else
                <!-- Action Buttons -->
                <div class="d-flex gap-3 justify-content-between align-items-center">
                    <a href="javascript:history.back()" class="btn btn-secondary btn-lg">
                        <i class="fa-solid fa-arrow-left me-2"></i> Back
                    </a>

                    @if($template->button_link && Route::has($template->button_link))
                        <a href="{{ route($template->button_link) }}" class="btn btn-success btn-lg">
                            {{ $template->button_text ?? 'Proceed' }}
                            <i class="fa-solid fa-arrow-right ms-2"></i>
                        </a>
                    @else
                        <button class="btn btn-success btn-lg" disabled>
                            {{ $template->button_text ?? 'Proceed' }}
                        </button>
                    @endif
                </div>
            @endif
    </div>
</div>

<style>
    .wrap {
        max-width: 1200px;
        margin: auto;
    }
    .hero {
    background: linear-gradient(135deg, #4f8dfd, #6d5dfc);
    padding: 35px;
    color: #fff;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(79, 141, 253, .25)
}

.sec {
    background: #fff;
    margin-top: 24px;
    padding: 28px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05)
}

.head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px
}

.ic {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px
}

.blue {
    background: #e8f1ff;
    color: #2563eb
}

.green {
    background: #ebfff4;
    color: #16a34a
}

.purple {
    background: #f3ecff;
    color: #7c3aed
}

.orange {
    background: #fff4e8;
    color: #ea580c
}

.red {
    background: #ffecec;
    color: #dc2626
}

.cyan {
    background: #e9fdff;
    color: #0891b2
}

.cardx {
    background: linear-gradient(135deg, #fff, #f8fbff);
    border: 1px solid #dbeafe;
    border-radius: 16px;
    padding: 18px;
    margin: 15px 0
}

ul.list-item {
    padding-left: 20px
}

.list-item li {
    margin: 8px 0
}

.fee {
    border-radius: 18px;
    background: #fff;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .05)
}

.fee i {
    font-size: 32px;
    color: #2563eb
}

h5.list-title {
    color: #2563eb
}
</style>
@if($errors->has('service_id'))
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const serviceSection = document.getElementById('service-section');

            if (serviceSection) {
                serviceSection.scrollIntoView({
                    behavior: 'smooth',
                    block: 'center'
                });

                document.getElementById('service_id')?.focus();
            }
        });
    </script>
@endif
@endsection