@extends('layouts.app')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <!-- Hero -->
        <div
                class="bg-white bg-image"

        >
            <div class="bg-black-75">
                <div class="content content-full content-top">
                    <div class="py-4 text-center">
                        <h1 class="h1 font-w700 text-black mt-5 mb-3 rounded p-2 d-inline-block">
                            {{$data->title}}
                        </h1><br>
                        <h2 class="h3 font-w400 text-black-75 mb-5 rounded p-2 d-inline-block">
                            {{$data->sub_title}}
                        </h2>
{{--                        <a--}}
{{--                            class="btn btn-hero-primary"--}}
{{--                            href="javascript:void(0)"--}}
{{--                            data-toggle="click-ripple"--}}
{{--                        >--}}
{{--                            <i class="fa fa-play mr-1"></i> Start Series--}}
{{--                        </a>--}}
                    </div>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <!-- Page Content -->
        <div class="content content-boxed">
            <!-- Meta -->
            <div class="row row-deck">
                <div class="col-md-6 d-flex flex-column">
                    <div
                        class="block block-rounded block-bordered block-link-shadowmb"
                    >
                        <div class="block-content">
                            <table class="table table-borderless table-striped">
                                <tbody>
                                <tr>
                                    <td>
                                       {!! $data->description !!}
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <i class="fa fa-fw fa-calendar mr-1"></i> {{$data->created_at->format('Y-m-d')}}
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <i class="fa fa-fw fa-tags mr-1"></i>
                                        @foreach($data->skills as $skill)
                                        <a
                                            class="badge badge-primary text-uppercase font-w600"
                                            href="javascript:void(0)"
                                        >{{$skill}}</a
                                        >
                                        @endforeach
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row row-deck align-items-end">
                        <div class="col-12">
                            <a class="block block-rounded mb-3" href="javascript:void(0)">
                                <div
                                    class="block-content block-content-full d-flex align-items-center justify-content-between"
                                >
                                    <div>
                                        <button
                                            type="button"
                                            class="btn btn-hero-lg btn-outline-primary mr-1 mb-0 push"
                                            data-toggle="modal"
                                            data-target="#modal-block-popout"
                                        >
                                            {{trans('web.order_now')}}
                                        </button>


                                    </div>
                                    <div class="ml-3 text-right">
                                        <p class="font-size-h2 font-w600 mb-0">{{$data->price}} KWD </p>

                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12">
                            <a href="https://api.whatsapp.com/send?phone={{$data->whatsapp}}&text=Hello this is the starting message"
                               class="block block-rounded mb-3 btn btn-hero-sm btn-rounded btn-outline-success mr-1">
                                <i class="fab fa-fw fa-whatsapp mr-1"></i> Whatsapp
                            </a>

                        </div>
                    </div>
                </div>
                <div class="col-md-6 d-flex flex-column">
                    <div class="block block-rounded block-bordered block-link-shadowmb">
                        <div class="block-content">
                            <img src="{{asset($data->image)}}" style="    width: 100%;">
                        </div>
                    </div>

                </div>
            </div>
            <!-- END Meta -->
        </div>
        <!-- END Page Content -->
    </main>
    <!-- END Main Container -->
    <!-- Pop Out Block Modal -->
    <div
        class="modal fade"
        id="modal-block-popout"
        tabindex="-1"
        role="dialog"
        aria-labelledby="modal-block-popout"
        aria-hidden="true"
    >
        <div class="modal-dialog modal-dialog-popout" role="document">
            <div class="modal-content">
                <div class="block block-themed block-transparent mb-0">
                    <div class="block-header">
                        <h3 class="block-title">@lang('web.OrderRegister')</h3>
                        <div class="block-options">
                            <button
                                type="button"
                                class="btn-block-option"
                                data-dismiss="modal"
                                aria-label="Close"
                            >
                                <i class="fa fa-fw fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="block-content">
                        <!-- Sign In Form -->

                        <div class="row no-gutters justify-content-center">
                            <div class="col-12">
                                <form
                                    class="js-validation-signin"
                                    action="{{route('website.workshops.store')}}"
                                    method="POST"
                                >
                                    @csrf
                                    <div class="py-3">
                                        <input type="hidden" name="workshop_id" value="{{$data->id}}">
                                        <div class="form-group">
                                            <input required
                                                type="text"
                                                class="form-control form-control-lg form-control-alt"
                                                id="login-username"
                                                name="name"
                                                placeholder="@lang('web.name')"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <input required
                                                type="text"
                                                class="form-control form-control-lg form-control-alt"
                                                id="login-username"
                                                name="phone"
                                                   placeholder="@lang('web.phone')"
                                            />
                                        </div>
                                        <div class="form-group">
                                            <input required
                                                type="email"
                                                class="form-control form-control-lg form-control-alt"
                                                id="login-username"
                                                name="email"
                                                   placeholder="@lang('web.email')"
                                            />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <button
                                            type="submit"
{{--                                            data-dismiss="modal"--}}
                                            class="btn btn-block btn-hero-lg btn-hero-primary push"
{{--                                            onclick="fireSwal()"--}}
                                        >
                                            <i class="fa fa-fw fa-sign-in-alt mr-1"></i> @lang('web.subscribe')
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- END Sign In Form -->
                    </div>
                    <div class="block-content block-content-full text-right bg-light">
                        <button
                            type="button"
                            class="btn btn-sm btn-light"
                            data-dismiss="modal"
                        >
                            @lang('web.close')
                        </button>
                        <button
                            type="button"
                            class="btn btn-sm btn-primary"
                            data-dismiss="modal"
                        >
                            @lang('web.Done')
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END Pop Out Block Modal -->
@endsection