@extends('../../master_layout/website_master')

@section('title')
<title>{{env('APP_NAME')}} :: Banner Upload</title>
@endsection


@section('heading')
<section class="page-heading">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="content">
                    <a href="javascript:history.back()" class="btn btn-link">
                        <i class="fa fa-angle-left"></i> Back
                    </a>
                    <h1>Banner Upload {{ $banner->country_name }} 
                        @if(isset($banner->city_name) && $banner->city_name !='') / {{$banner->city_name}} @endif
                        @if(isset($banner->location_name) && $banner->location_name !='') / {{$banner->location_name}} @endif
                        @if(isset($banner->area_name) && $banner->area_name !='') / {{$banner->area_name}} @endif
                    </h1>
                    <!-- breadcrumb -->
                    @php
                    $breadcrumb = array(
                        array('title'=>'My Banners', 'url'=>route('my-banners')),
                        array('title'=>'Edit Banner', 'active'=>'1')
                    );
                    @endphp
                    @include('website_view.component.breadcrumb',  compact("breadcrumb"))
                    <!-- \breadcrumb -->
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('content')

@if (session('errors'))
<div class="alert alert-danger alert-dismissible">
    @foreach($errors->all() as $message)
    <li class="text-danger">{{$message}}</li>
    @endforeach
</div>
@endif

<section class="profile-one">
    <div class="container-fluid">
        <div class="row gap-y-2">
            <!-- Message-->
            @if (session('message'))
            <div class="col-12">
                <div class="alert alert-{{session('message.type')}} alert-dismissible fade show" role="alert">
                    @if(session('message.type')=='danger')
                    <strong>Oops!</strong> {!! session('message.text') !!}
                    @else
                    <strong>Success!</strong> {!! session('message.text') !!}
                    @endif
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
            @endif
            <!--end message-->
            @if(isset($banner) && !empty($banner))                    
            <div class="@if($banner->banner_position =='top')col-md-4 @else col-md-3 @endif">
                <div class="left-sec">

                    <!-- Banner section --> 
                    @php            
                        $auction_div = 1;
                        $display_bannercover = 1;
                    @endphp              
                    <div class="row">
                        <div class="col-md-12">
                            <div class="banner-bg-image banner-Image" >
                                @if(isset($banner->banner) && $banner->banner!='')
                                    @if($banner->enable_link == 1)<a href="{{$banner->banner_link}}" target="_blank">@endif
                                    <img src="{{ getStorageFile(config('path.banner').$banner->banner, 'b2') }}" class="w-100" style="height: 255px;" />
                                    @if($banner->enable_link == 1)</a>@endif
                                @else
                                <img src="{{ asset('public/uploads/banner-placeholder.png') }}" class="w-100" style="height: 255px;" />
                                @endif

                                @if($display_bannercover == 1)
                                <div class="banner-mask text-light d-flex flex-column text-center" style="background-color: rgba(0, 0, 0, 0.8)">                        
                                    <div class="pt-3 px-3 pb-2 text-uppercase"><strong>{{$banner->banner_position}} Banner&nbsp;#{{$banner->spot}}</strong></div>                        
                                    <div class="d-flex flex-column align-items-center w-100 text-center mt-4">
                                        <h3 class="mb-4 mx-2">
                                            <span>Booked</span>                                            
                                        </h3>
                                        <div class="text-success mt-5">You booked spot for <br>{{date("Y-m-d", strtotime($banner->start_date))}} to {{date("Y-m-d", strtotime($banner->end_date))}}</div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- \Banner section -->                   
                    
                </div>
            </div>

            <div class="@if($banner->banner_position =='top')col-md-8 @else col-md-9 @endif">
                <div class="col-12">
                    <nav class="slidemenu"> 
                        
                        <label for="slide-item-1"><span>Book Spot</span></label>
                        
                        <!-- Item 2 -->
                        <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle" checked />
                        <label for="slide-item-2"><span>Upload Banner</span></label>
                        
                        <div class="clearfix"></div>

                        <!-- Bar -->
                        <div class="slider">
                            <div class="bar"></div>
                        </div>                    
                    </nav>
                </div>
                <form action="{{route('banner.uploadprocess')}}" method="post" id="processBanner" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="banner_subscription_id" value="{{$banner->banner_subscription_id}}">
                
                <div class="col-12">
                    @if(isset($banner->enable_link) && $banner->enable_link ==1 )   
                    <div class="form-group mb-3">
                        <label for="banner_link" class="form-label">Enter URL</label>
                        <input type="text" class="form-control" name="banner_link" id="banner_link" placeholder="https://www.domain.com" value="{{$banner->banner_link}}">
                    </div>    
                    @endif

                    <div class="form-group mb-3">
                        @php
                            if($banner->banner_position =='top'){
                                $bannersize = '400px x 200px' ;
                            }
                            if($banner->banner_position =='side'){
                                $bannersize = '250px x 350px' ;
                            }
                        @endphp
                        <label for="banner" class="form-label">Upload Banner (Size (W x H) - {{$bannersize}})</label>
                        <input class="form-control" type="file" name="banner" id="banner">

                        @if(isset($banner->banner) && $banner->banner !='')
                            <a href="{{ getStorageFile(config('path.banner').$banner->banner, 'b2') }}" target="_blank">View Uploaded Banner</a>
                        @endif
                    </div>

                    <div class="form-group mb-3">
                        <label for="phone" class="form-label">Phone (Call button will display below banner if you enter number)</label>
                        <div class="form-inline">
                            <select class="custom-select country-code col-4" name="phone_code" id="phone_code">
                                <option value="">Dial (Country Code)</option>
                                @foreach($countries as $country)
                                <option value="{{$country->dial}}" selected >+{{$country->dial}} - {{$country->country_name}}</option>
                                @endforeach
                            </select>
                            <input type="text" class="form-control ml-2" name="phone_number"id="phone_number" value="@if(isset($banner->phone_number) && $banner->phone_number !=''){{$banner->phone_number}}@endif"  placeholder="Phone no.">
                        </div>
                    </div>

                    <div class="row mt-3">  
                        <div class="col-12">
                            <button class="btn btn-main submit">
                                Save
                            </button>
                        </div>
                    </div>
                </div>
                </form>                   
            </div>
            @endif
            
        </div>
    </div>
</section>

@endsection

@section('custom_js')
<script>
    $(function() {
       
        $('#processBanner').validate({
            rules: {   
                @if(empty($banner->banner))             
                banner: {
                    required: true,
                },
                @endif
                @if(isset($banner->enable_link) && $banner->enable_link ==1 )   
                banner_link: {
                    required: true,
                },
                @endif
            },
            messages: {
                @if(empty($banner->banner))           
                banner: {
                    required: "Please select banner",
                },
                @endif
                @if(isset($banner->enable_link) && $banner->enable_link ==1 )   
                banner_link: {
                    required: "Please enter url",
                },
                @endif
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            },
            submitHandler: function(form) { // <- pass 'form' argument in
                $(".btnmakeoffer").attr("disabled", true);
                form.submit(); // <- use 'form' argument here.
            }
        });

    });
</script>
@endsection