@extends('layouts.master')
@section('css')
    <!--- Internal Select2 css-->
    <link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
    <!---Internal Fileupload css-->
    <link href="{{ URL::asset('assets/plugins/fileuploads/css/fileupload.css') }}" rel="stylesheet" type="text/css" />
    <!---Internal Fancy uploader css-->
    <link href="{{ URL::asset('assets/plugins/fancyuploder/fancy_fileupload.css') }}" rel="stylesheet" />
    <!--Internal Sumoselect css-->
    <link rel="stylesheet" href="{{ URL::asset('assets/plugins/sumoselect/sumoselect-rtl.css') }}">
    <!--Internal  TelephoneInput css-->
    <link rel="stylesheet" href="{{ URL::asset('assets/plugins/telephoneinput/telephoneinput-rtl.css') }}">
@endsection
@section('title')
    عرض البرنامج
@stop

@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">برامج الرحلات</h4><span class="text-muted mt-1 tx-13 mr-2 mb-0">/
                    شاشة البرامج</span><span class="text-muted mt-1 tx-13 mr-2 mb-0">/
                    عرض البرنامج </span>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')

    <!-- row -->
    <div class="row">

        <div class="col-lg-12 col-md-12">
            <div class="card">
                <div class="card-body">

                        <div class="row">
                            <div class="col">
                                <label for="inputName" class="control-label">اسم البرنامج</label>
                                <input type="text" class="form-control form-control-lg" value="{{ $program->ar_program_name }}" id="" name="ar_program_name" disabled required>
                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label">النوع</label>
                                <input type="text" class="form-control form-control-lg" value="{{@$program->type->ar_type }}" id="" name="type_id" disabled required>


                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label">الحالة</label>
                                <input type="text" class="form-control form-control-lg" disabled value="غير مفعل">
                            </div>

                        </div>
                        <div class="row">

                            <div class="col">
                                <label for="inputName" class="control-label"> المدينة </label>
                                <input type="text" class="form-control form-control-md" id=""
                                    value="{{ $program->town }}" name="town" disabled required>
                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label"> المدينة السياحية </label>
                                <input type="text" class="form-control form-control-md" id=""
                                    value="لا يوجد" name="town" disabled required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="inputName" class="control-label"> سعر الحجز </label>
                                <input type="text" class="form-control form-control-md"
                                    value="{{ $program->reservation_price }}" id="" disabled name="reservation_price"
                                    required>
                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label"> توقيت الدفع </label>
                                <input type="text" class="form-control form-control-md" id=""
                                    value="{{ $program->payment_duration }}"disabled name="payment_duration" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="inputName" class="control-label"> متاح من </label>
                                <input type="date" class="form-control form-control-md" id=""
                                    value="{{ $program->available_from }}" disabled name="available_from" required>
                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label"> متاح الى </label>
                                <input type="date" class="form-control form-control-md" id=""
                                    value="{{ $program->available_to }}" disabled name="available_to" required>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <label for="inputName" class="control-label"> سعر العرض </label>
                                <input type="text" class="form-control form-control-md" id=""
                                    value="{{ $program->offer_price }}" disabled name="offer_price" required>
                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label"> العرض متاح من</label>
                                <input type="date" class="form-control form-control-md" id=""
                                    value="{{ $program->offer_start_date }}" disabled name="offer_start_date" required>
                            </div>
                            <div class="col">
                                <label for="inputName" class="control-label">العرض متاح الى </label>
                                <input type="date" class="form-control form-control-md" id=""
                                    value="{{ $program->offer_start_date }}" disabled name="offer_end_date" required>
                            </div>
                        </div>
                        <div class="row">
                            {{-- <div class="col">
                                <div class="col">
                                    <label for="inputName" class="control-label"> الصور </label>
                                    <br>
                                    @php
                                        $images = explode(',', $program->images);

                                    @endphp
                                    @foreach ($images as $image)
                                        <img src="{{asset('uploads/programs/'.$image)}}" alt="">
                                    @endforeach

                                </div>
                                <label for="inputName" class="control-label">التفاصيل </label>
                                <input type="text" class="form-control form-control-md" id=""
                                    value="{{ $program->description }}" name="description" required>
                            </div> --}}

                            <div class="col">
                                <label for="inputName" class="control-label"> الصور </label>
                                <br>
                                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                    @php
                                        $images = explode(',', $program->images);
                                        $index=0;
                                    @endphp

                                    <ol class="carousel-indicators">
                                        @for ($i = 0; $i < count($images); $i++)
                                            <li data-target="#carouselExampleIndicators" data-slide-to="{{$i}}"
                                                @if ($i==0)
                                                    class="active"
                                                @endif
                                            ></li>
                                        @endfor
                                    </ol>
                                    <div class="carousel-inner">
                                        @foreach ($images as $image)
                                            <div
                                            @if ($index++==0)
                                                class="carousel-item active"
                                            @else
                                                class="carousel-item"
                                            @endif
                                            >
                                                <img src="{{ asset('uploads/programs/' . $image) }}"
                                                    class="d-block w-100" style="height:400px" alt="">
                                            </div>
                                        @endforeach

                                    </div>
                                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button"
                                        data-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button"
                                        data-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                            </div>

                        </div>
                        <br>
                        <div class="d-flex justify-content-center">
                        </div>

                </div>
            </div>
        </div>
    </div>

    </div>

    <!-- row closed -->
    </div>
    <!-- Container closed -->
    </div>
    <!-- main-content closed -->
@endsection
@section('js')
    <!-- Internal Select2 js-->
    <script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
    <!--Internal Fileuploads js-->
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/fileupload.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fileuploads/js/file-upload.js') }}"></script>
    <!--Internal Fancy uploader js-->
    <script src="{{ URL::asset('assets/plugins/fancyuploder/jquery.ui.widget.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fancyuploder/jquery.fileupload.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fancyuploder/jquery.iframe-transport.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fancyuploder/jquery.fancy-fileupload.js') }}"></script>
    <script src="{{ URL::asset('assets/plugins/fancyuploder/fancy-uploader.js') }}"></script>
    <!--Internal  Form-elements js-->
    <script src="{{ URL::asset('assets/js/advanced-form-elements.js') }}"></script>
    <script src="{{ URL::asset('assets/js/select2.js') }}"></script>
    <!--Internal Sumoselect js-->
    <script src="{{ URL::asset('assets/plugins/sumoselect/jquery.sumoselect.js') }}"></script>
    <!--Internal  Datepicker js -->
    <script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
    <!--Internal  jquery.maskedinput js -->
    <script src="{{ URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
    <!--Internal  spectrum-colorpicker js -->
    <script src="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.js') }}"></script>
    <!-- Internal form-elements js -->
    <script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>



@endsection