@extends('dashboard::layouts.app')

@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Create Banner
    </h5>
@endsection

@section('content')
    <div class="card card-custom">
        <div class="card-header">
            <div class="row">
                <h3 class="card-title">
                    Create New Banner
                </h3>
            </div>
        </div>
        <!--begin::Form-->
        <form class="form" action="{{route('banner.store')}}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card-body">
         <div class="mb-15">
            <div class="form-group row">
               <label class="col-lg-3 col-form-label text-right"><span style="color: red">*</span> Banner Name:</label>
               <div class="col-lg-6">
                  <input type="text" name="banner_name" class="form-control" value="{{old('name')}}" placeholder="Enter banner name here" required/>
                    @error('name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
               </div>
            </div>
            <div class="form-group row">
                <label class="col-lg-3 col-form-label text-right"><span style="color: red">*</span>Banner Type:</label>
                <div class="col-lg-6">
                    <select class="form-control selectpicker" name='banner_type' data-size="7" data-live-search="true" required>
                        <option value="">Select Banner Type</option>
                        @if(count($banner_categories)>0)
                            @foreach($banner_categories as $cate)
                                <option value="{{ $cate->id }}">{{ $cate->name }}</option>
                            @endforeach
                        @else
                            <option>No Type to Select</option>
                        @endif
                    </select>
                    @error('banner_type')
                        <span style="color: red;">{{ $message }}</span>
                    @enderror
                </div>
            </div>

            <div class="form-group row">
               <label class="col-lg-3 col-form-label text-right"><span style="color: red">*</span>Banner Image:</label>
               <div class="col-lg-6">
                  <div class="image-input image-input-outline" id="kt_image_1">
                     <div class="image-input-wrapper" style="background-image: url(cd-assets/media/users/100_1.jpg)"></div>
                     <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                     <i class="fa fa-pen icon-sm text-muted"></i>
                     <input type="file" name="image" accept=".png, .jpg, .jpeg, .jfif" required/>
                     <input type="hidden" name="profile_avatar_remove" />
                     </label>
                     <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                     <i class="ki ki-bold-close icon-xs text-muted"></i>
                     </span>
                  </div>
               </div>
                    @error('image')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
            </div>
             
            <div class="form-group row">
                <label class="col-lg-3 col-form-label text-right">Banner Link:</label>
                <div class="col-lg-8">
                   <input type="text" class="form-control" id="banner_link" name="banner_link" placeholder="Enter Redirection Link" />
                </div>
             </div>
         </div>
      </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-lg-3"></div>
                    <div class="col-lg-6">
                        <button type="submit" class="btn btn-success mr-2">Submit</button>
                        <button type="reset" class="btn btn-secondary">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
        <!--end::Form-->
    </div>
@endsection