@extends('admin.layout')
@section('custom-style')
        <style>
        .alert{
            padding: 2px 10px;
        }
        .textarea{
            width: 100%; height: 300px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;
        }

        .thubnail_img, .slider_img {
            width:100%;
            height:207px;
        }
        
        .slider_img {
            width:70%;
            height:207px;
        }
        
        .thubnail_img {
            width:100%;
            height:150px;
        }

        .thubnail_img img, .slider_img img {
            width:100%;
            height:100%;
            object-fit:cover;
            border-radius:10px;
        }

        .files input {
            outline: 2px dashed #92b0b3;
            outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear;
            padding: 120px 0px 85px 9%;
            font-size: 11px;
            text-align: center !important;
            margin: 0;
            width: 100% !important;
        }

        .slider-files input {
            outline: 2px dashed #92b0b3;
            outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear;
            padding: 120px 0px 85px 30%;
            font-size: 11px;
            text-align: center !important;
            margin: 0;
            width: 100% !important;
        }
        .files input:focus, .slider-files input:focus{     outline: 2px dashed #92b0b3;  outline-offset: -10px;
            -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
            transition: outline-offset .15s ease-in-out, background-color .15s linear; border:1px solid #92b0b3;
        }
        .files, .slider-files{ position:relative}
        .files:after, .slider-files:after {  pointer-events: none;
            position: absolute;
            top: 60px;
            left: 0;
            width: 50px;
            right: 0;
            height: 56px;
            content: "";
            background-image: url(https://image.flaticon.com/icons/png/128/109/109612.png);
            display: block;
            margin: 0 auto;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .files:before, .slider-files:before {
            position: absolute;
            bottom: 10px;
            left: 0;  pointer-events: none;
            width: 100%;
            padding-top:10px;
            right: 0;
            height: 57px;
            content: " or drag it here. ";
            display: block;
            margin: 0 auto;
            color: #2ea591;
            font-weight: 600;
            text-transform: capitalize;
            text-align: center;
        }

    </style>
@endsection
@section('content')
    <section class="content-header">
        <h1>
            Subscription Pass
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-snowflake-o"></i> Subscription Pass</a></li>
            <li class="active">Create</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Info boxes -->
        <div class="row">
            <div class="col-md-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">Create Subscription Pass for a user</h3>
                    </div>
                    @if ($errors->any())
                        <div>
                            @foreach ($errors->all() as $error)
                                <li class="alert alert-danger">{{ $error }}</li>
                            @endforeach
                        </div>
                    @endif
                    @if(\Session::has('error'))
                        <div>
                            <li class="alert alert-danger">{!! \Session::get('error') !!}</li>
                        </div>
                    @endif
                    @if(\Session::has('success'))
                        <div>
                            <li class="alert alert-success">{!! \Session::get('success') !!}</li>
                        </div>
                @endif
                <!-- /.box-header -->
                    <!-- form start -->
            <form role="form" method="post" enctype="multipart/form-data">
                        {{csrf_field()}}
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>Select User*</label>
                                        <select type="text" name="user_id" class="form-control" id="select-state" placeholder="" required>
                                            <option value="">None</option>
                                            @if($all_users)
                                                @foreach($all_users as $user)
                                                    <option value="{{$user->id}}" @if($user->id == old('id')) selected @endif>{{$user->name." ".$user->surname." - ".$user->email}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                                
                                 <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>Select Subscription*</label>
                                        <select type="text" name="subscription_id" class="form-control" id="select-state" placeholder="" required>
                                            <option value="">None</option>
                                            @if($all_subscriptions)
                                                @foreach($all_subscriptions as $subscription)
                                                    <option value="{{$subscription->id}}" @if($subscription->id == old('id')) selected @endif>{{$subscription->title." valid for ".$subscription->days." day(s) @".$subscription->price." USD"}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Create &nbsp;<i class="fa fa-long-arrow-right"></i> </button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
@endsection

@section('custom-scripts')
@section('custom-scripts')
    <script>
         $(document).ready(function () {
      $('select').selectize({
          sortField: 'text'
      });
  });
    </script>
@endsection