@extends('admin.layouts.master')
@section('title', 'Banner')
@section('content')
<style>
.some-text{
    color:red;
    font-style: italic;
    font-size: 15px;
}
.help-block
{
    color: red;
    font-size: 13px;
    font-weight: normal;
}
    </style>

<!-- Page Wrapper -->
<div class="page-wrapper">
    <div class="content container-fluid">

        <!-- Page Header -->
        <div class="page-header">
            <div class="row">
                <div class="col">
                    <h3 class="page-title">Banner</h3>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item active"> @if($data ?? '') Update @else Add @endif  Banner</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- /Page Header -->

        <div class="row">

            <div class="col-md-12">
                @include('admin.includes.msg')
                <div class="card">

                     <div class="card-body">
                        <ul class="nav nav-tabs">
                            <li class="nav-item"><a class="nav-link active" href="#basictab1"
                                                    data-toggle="tab">General</a></li>
                        </ul>

                        <form method="POST" action="{{ route('banner.store') }}" enctype="multipart/form-data">
                            {{ csrf_field() }}
                            @if($data ?? '')
                                <input type="hidden" name="id" value="{{ $data->id }}">
                            @endif


                            <div class="tab-content">
                                <div class="tab-pane show active" id="basictab1">

                                    <div class="form-group row">
                                        <label class="col-form-label col-md-2">Banner Image</label>
                                        <div class="col-md-6">
                                            <input class="form-control imgInp" name="banner" type="file">
                                            <span style="color:red; font-style:italic;font-size:15px">Only JPG,png files are acceptable</span></br>
                                            @if(isset($data) && !empty($data->banner)) <div class="banner"> <img src="{{ '/thumb/'.$data->banner }}" class="preview"><button type="button" class="btn btn-sm btn-danger" onclick="delimg('banners','banner',{{ $data->id }})">Remove</button></div> @endif
                                        </div>
                                        <div class="col-md-2">
                                            <img id="banner" class="preview" src="/admin/assets/img/preview.jpg"/>
                                        </div>

                                    </div>




                                    <div class="form-group row">
                                        <label class="col-form-label col-md-2">Type</label>
                                        <div class="col-md-8">
                                            <input name="banner_type" type="radio" value="small" @if($data ?? '') @if($data->banner_type=='small') checked @endif @endif> Small (740x260)
                                            <input name="banner_type" type="radio" value="large" @if($data ?? '') @if($data->banner_type=='large') checked @endif @else checked @endif> large (970x550)
                                            <input name="banner_type" type="radio" value="ads_horizontal" @if($data ?? '') @if($data->banner_type=='ads_horizontal') checked @endif @else checked @endif> Ads Horizontal (720x283)
                                            <input name="banner_type" type="radio" value="ads_vertical" @if($data ?? '') @if($data->banner_type=='ads_vertical') checked @endif @else checked @endif> Ads Vertical (270x450)
                                        </div>
                                    </div>



                                    <div class="form-group row">
                                        <label class="col-form-label col-md-2"> Link</label>
                                        <div class="col-md-8">
                                            <input id="buttonLink" class="form-control"  name="link" type="text" value="@if($data ?? '') {{ $data->link }} @endif">
                                        </div>
                                    </div>


                                </div>

                                <div class="form-group row">
                                    <label class="col-form-label col-md-4">
                                        <button type="submit" class="btn btn-primary">Submit</button>
                                    </label>

                                </div>

                        </form>


                </div>
            </div>

        </div>

    </div>
</div>
<!-- /Main Wrapper -->

</div>
<script>
    $(document).ready(function(){
        $('#publishDate').datepicker({
          dateFormat: 'yy-mm-dd'
    });
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
var id=$( input ).attr('name');
            reader.onload = function(e) {
                $('#'+id).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]); // convert to base64 string
        }
    }

    $(".imgInp").change(function() {
        readURL(this);
    });

    </script>
@endsection