@extends('web.layouts.app')

@section('title', $sector?->title)
@description(Str::limit(strip_tags($sector?->desc), 160))
@keywords(implode(',', json_decode(getSetting('keyword', app()->getLocale()))))
@image(asset('storage/' . getSetting('logo')))

@section('sub_header')
    <div class="sub-header">
        <div class="main-container">
            <div class="text-about-header">
                <h2>{{ transWord('تفاصيل الحلول') }}</h2>
                <h6> <a href="{{ route('web.solutions.home') }}"> {{ transWord('الرئيسية') }} </a> <i
                        class="bi bi-chevron-double-left"></i>
                    <a href="{{ route('web.solutions.sectors.index') }}"> {{ getSetting('sector_name' , app()->getLocale() ) }} </a> <i
                        class="bi bi-chevron-double-left"></i>
                    {{ $sector?->title }}
                </h6>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <section class="service-details mr-section">
        <div class="main-container">
            <div class="row">
                @if (isset($sector))
                    <div class="col-lg-8">
                        <div class="titel-details d-flex align-items-center">
                            <img src="{{ url('web') }}/imges/home-icon.png" alt="">
                            <h2> {{ $sector->title }}</h2>
                        </div>

                        <div class="img-setvice-details">
                            <img src="{{ url('') . '/' . $sector->image }}" alt="">
                        </div>
                        <div class="text-details">
                            {!! $sector->desc !!}
                            <button class="ctm-btn" data-toggle="modal" data-target=".bd-example-modal-lg">{{ transWord('اطلب الخدمة') }}</button>
                        </div>
                    </div>
                @else
                    <div class="col-lg-8">

                        <p>
                            {{ transWord('لا يوجد بيانات') }}

                        </p>
                    </div>
                @endif
                <div class="col-lg-4">
                    <div class="sidebar-news">
                        <div class="search-news">
                            <div class="form-search">
                                <form action="{{ route('web.solutions.search-sector') }}" method="GET" id="searchForm">
                                    <input type="text" class="form-control" id="write-text"
                                        placeholder="{{ transWord('ابحث هنا') }}" name="search" required>
                                    @error('search')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                    <button> <i class="bi bi-search"></i> </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="filter">
                        <h2>{{ transWord('الفئات') }}</h2>

                        @foreach($sectors as $sec)
                            <div class="icon-filter">
                                <a href="{{ route('web.solutions.sectors.show', $sec->slug) }}">{{ $sec->title }}
                                    <i class="bi bi-chevron-double-left"></i>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="popap">
                        <div class="main-container">
                            <div class="logo-popap">
                                <img src="imges/logo.png" alt="">
                                <h2> {{ transWord('اطب الخدمة الان') }}</h2>
                            </div>
                            <form class="forms" method="post" id="sectorForm"
                                action="{{ route('web.solutions.service_request.store') }}">
                                @csrf
                                <div class="input text-center ">
                                    <input type="hidden" name="sector_id" value="{{ $sector->id }}">
                                    <div class="form-input">
                                        <i class="bi bi-person"></i>

                                        <input type="text" name="name" id=""
                                            placeholder=" {{ transWord('الاسم') }}" class="form-control">
                                    </div>
                                    <div class="form-input">
                                        <i class="bi bi-envelope"></i>
                                        <input type="email" name="email" id=""
                                            placeholder=" {{ transWord('البريد الالكتروني') }}" class="form-control">
                                    </div>
                                    <div class="form-input">
                                        <i class="bi bi-telephone"></i>
                                        <input type="tel" name="phone_number" id=""
                                            placeholder=" {{ transWord('رقم الهاتف') }}" class="form-control">
                                        <input type="hidden" name="sector_id" value="{{ $sector->id }}">
                                    </div>
                                </div>
                                <div class="form-input">
                                    <i class="bi bi-chat-left-dots"></i>
                                    <textarea name="message" placeholder=" {{ transWord('ادخل رسالتك هنا') }}" class="form-control" required=""></textarea>
                                </div>
                                <div class="btn-input">
                                    <button class="ctm-btn">{{ transWord('حفظ') }}</button>
                                </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </section>
    @push('js')
    <script src="{{ asset('web/js/custom/validation/sectorForm.js') }}"></script>
@endpush
@endsection