@extends('admin.layouts.app')
@section('page_content')
<div class="content-wrapper">
    <!-- Page Title Header Starts-->
    <div class="row page-title-header">
        <div class="col-12">
            <div class="page-header">
                <h4 class="page-title">Homepage</h4>
                <ul>
                    <li><a href="{{route('admin.cms.sliders')}}" class="filled_green_btn">Back</a></li> 
                </ul> 
            </div>
        </div>
    </div>
    <!-- Page Title Header Ends-->

    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row flex-grow">
            <div class="col-12">
                <div class="cust_nav_list">
                    @include('admin.cms.home_tabs')
                </div>
                <div class="card cms_homepage_card">
                    <div class="card-body">
                        <!-- <h4 class="card-title">Slider Section Here</h4> -->
                        <div class="row page-title-header">
                            <div class="col-12">
                                <div class="page-header">
                                    <h4 class="page-title"> {{ (isset($slider->id)) ? 'Edit' : 'Add' }} Slider</h4>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 grid-margin">
                                @if(isset($slider) && isset($slider->id))
                                    <form class="forms-sample" method="post" enctype="multipart/form-data" action="{{route('admin.cms.sliders.update')}}">
                                        @csrf
                                        <input type="hidden" name="type" value="7">
                                        <input type="hidden" name="id" value="{{$slider->id}}">

                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="title">Slider Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="title" name="name" placeholder="Slider Title" value="{{$slider->title}}" required>
                                            </div>
                                            
                                            <div class="form-group col-md-6">
                                                <label for="ar_title">Slider Title (Arabic) </label>
                                                <input type="text" class="form-control" id="ar_title" name="ar_name" placeholder="Slider Title" value="{{$slider->ar_title}}">
                                            </div>
                                        </div>

                                        

                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <label for="slider_image">Web Slider Image </label>
                                                    <div class="custom-file">
                                                        <input type="file" name="slider_image" class="custom-file-input form-control" id="slider_image">
                                                        <label class="custom-file-label" for="slider_image">Choose file</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    @if(file_exists($slider->image))
                                                        <a href="{{asset($slider->image)}}" target="_blank"><img src="{{asset($slider->image)}}" style="width:100%;"></a>
                                                    @else
                                                        
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <label for="slider_mobile_image">Mobile Slider Image </label>
                                                    <div class="custom-file">
                                                        <input type="file" name="slider_mobile_image" class="custom-file-input form-control" id="slider_mobile_image">
                                                        <label class="custom-file-label" for="slider_mobile_image">Choose file</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    @if(file_exists($slider->mobile_image))
                                                        <a href="{{asset($slider->mobile_image)}}" target="_blank"><img src="{{asset($slider->mobile_image)}}" style="width:100%;"></a>
                                                    @else
                                                        
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="form-group cust_dark_bg p-3 my-4">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label>Choose Icon<small>(Optional)</small>
                                                    </label>
                                                    <div class="icon_list_box px-0"> 
                                                        @foreach($slider_icons as $k => $si)

                                                            <div class="icon_radio icon_radio_m1 icon-lg-radio {{(isset($slider->icon_id) && $slider->icon_id == $si->id) ?'active':'' }}">
                                                              <input type="radio" id="slider_icon{{$k}}" name="slider_icon" {{(isset($slider->icon_id) && $slider->icon_id == $si->id) ?'checked':'' }} value="{{$si->id}}" >
                                                              <label class="slider_icon_label_cls " for="slider_icon{{$k}}">
                                                                <img class="slider_icon_cls" style="filter: brightness(0);" src="{{asset('uploads/products/categories')}}/{{$si->icon}}" alt="color-temperature" />
                                                              </label>
                                                            </div>
                                                        @endforeach           
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mt-4">
                                            <div class="row">
                                                <div class="col-md-3 form-group">
                                                    <label for="button_url_title">Button Title <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="button_url_title" value="{{ $slider->sub_title }}" id="button_url_title" placeholder="Button Title" required>
                                                </div>
                                                
                                                <div class="col-md-3 form-group">
                                                    <label for="ar_button_url_title">Button Title (Arabic)</label>
                                                    <input type="text" class="form-control" name="ar_button_url_title" value="{{ $slider->ar_sub_title }}" id="ar_button_url_title" placeholder="Button Title in Arabic">
                                                </div>

                                                <div class="col-md-6 form-group">
                                                    <label for="button_link">Button Url <span class="text-danger">*</span></label>
                                                    <input type="url" class="form-control" name="button_link" value="{{ $slider->link }}" id="button_link" placeholder="Button url" required>
                                                </div>
                                            </div>
                                        </div>

                                        

                                        <button type="submit" class="btn btn-green btn-rounded mr-2">Update</button>
                                        <!-- <button class="btn btn-light btn-rounded">Cancel</button> -->
                                    </form>
                                @else
                                    <form class="forms-sample" method="post" enctype="multipart/form-data" action="{{route('admin.cms.sliders.save')}}">
                                        @csrf
                                        <input type="hidden" name="type" value="7">

                                        <div class="form-row">
                                            <div class="form-group col-md-6">
                                                <label for="title">Slider Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="title" name="name" placeholder="Slider Title" required>
                                            </div>
                                            
                                            <div class="form-group col-md-6">
                                                <label for="ar_title">Slider Title (Arabic) </label>
                                                <input type="text" class="form-control" id="ar_title" name="ar_name" placeholder="Slider Title">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="slider_image">Web Slider Image <span class="text-danger">*</span></label>
                                            <div class="custom-file">
                                                <input type="file" name="slider_image" class="custom-file-input form-control" id="slider_image" required>
                                                <label class="custom-file-label" for="slider_image">Choose file</label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="slider_mobile_image">Mobile Slider Image <span class="text-danger">*</span></label>
                                            <div class="custom-file">
                                                <input type="file" name="slider_mobile_image" class="custom-file-input form-control" id="slider_mobile_image" required>
                                                <label class="custom-file-label" for="slider_mobile_image">Choose file</label>
                                            </div>
                                        </div>

                                        <!-- <div class="form-group">
                                            <label for="slider_icon">Web Slider Icon <span class="text-danger">*</span></label>
                                            <div class="custom-file">
                                                <input type="file" name="slider_icon"  class="custom-file-input form-control" id="slider_icon" required>
                                                <label class="custom-file-label" for="slider_icon">Choose file</label>
                                            </div>
                                        </div> -->

                                        <div class="form-group cust_dark_bg p-3 my-4">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <label>Choose Icon<small>(Optional)</small>
                                                    </label>
                                                    <div class="icon_list_box px-0"> 
                                                        @foreach($slider_icons as $k => $si)

                                                            <div class="icon_radio icon_radio_m1 icon-lg-radio">
                                                              <input type="radio" id="slider_icon{{$k}}" name="slider_icon" value="{{$si->id}}" >
                                                              <label class="slider_icon_label_cls " for="slider_icon{{$k}}">
                                                                <img class="slider_icon_cls" style="filter: brightness(0);" src="{{asset('uploads/products/categories')}}/{{$si->icon}}" alt="color-temperature" />
                                                              </label>
                                                            </div>
                                                        @endforeach           
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group mt-4">
                                            <div class="row">
                                                <div class="col-md-3 form-group">
                                                    <label for="button_url_title">Button Title <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="button_url_title" id="button_url_title" placeholder="Button Title" required>
                                                </div>
                                                
                                                <div class="col-md-3 form-group">
                                                    <label for="ar_button_url_title">Button Title (Arabic)</label>
                                                    <input type="text" class="form-control" name="ar_button_url_title" id="ar_button_url_title" placeholder="Button Title in Arabic">
                                                </div>

                                                <div class="col-md-6 form-group">
                                                    <label for="button_link">Button Url <span class="text-danger">*</span></label>
                                                    <input type="url" class="form-control" name="button_link" id="button_link" placeholder="Button url" required>
                                                </div>
                                            </div>
                                        </div>

                                        
            
                                        <button type="submit" class="btn btn-green btn-rounded mr-2">Save</button>
                                        <!-- <button class="btn btn-light btn-rounded">Cancel</button> -->
                                    </form>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            </div>
        </div>
    </div>
</div>
@endsection