@extends('admin.layouts.app')
@section('page_content')
<style>
    .fa_download{
        font-size: 38px !important;
        padding: 8px !important;
        margin: 20px 0px !important;
        color: #70be44 !important;
    }
    .uploaded_files{}
    .uploaded_files_list{}
    .uploaded_file{}
    .uploaded_file a img{}

    .uploaded_file_actions{}
    .uploaded_file_actions a{}

    .radio-group{
        position: relative;
    }

    .radio{
        display:inline-block;
        /* width:15px;
        height: 15px; */
        border-radius: 0%;
        border: 2px solid lightblue;
        cursor:pointer;
        margin: 2px 0; position: relative;
    }

    .radio img{
        width: 150px;
        height: 150px;
    }
    .radio.selected{
        border-color: #70be44;
    }
    .radio span.icon{
        width: 40px;
        height: 40px;
        background: #70be44;
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 50%;
        position: absolute;
        top: calc(50% - 20px);
        left: calc(50% - 20px);
        display:none;font-size:20px;
    }
    .radio.selected span.icon{display:flex;}
</style>
<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">Catalogue</h4>
                <ul>
                    <li><a href="{{route('admin.catalogue.page_titles')}}" class="outline_green_btn">Page Title</a></li> 
                    <li><a href="{{route('admin.catalogue.files')}}" class="filled_green_btn">Catalogue Files</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="card">
                        <div class="card-body">
                            <!-- <h4 class="card-title">Default form</h4> -->
                            @if(!isset($catalogue->id) && !isset($catalogue))
                                <form class="forms-sample" method="post" enctype="multipart/form-data" action="{{route('admin.catalogue.save')}}">
                                    @csrf

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

                                    <div class="form-group">
                                        <label for="catalogue_file">Catalogue file (.pdf) <span class="text-danger">*</span></label>
                                        <div class="custom-file">
                                            <input type="file" name="catalogue_file" accept=".pdf"  class="custom-file-input form-control" required id="catalogue_file">
                                            <label class="custom-file-label" for="catalogue_file">Choose file</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="thumb_image">Catalogue Thumb Image <span class="text-danger">*</span></label>
                                        <!-- <input type="file" class="form-control" id="thumb_image" name="thumb_image" style="padding: 10px;"> -->
                                        <div class="custom-file">
                                            <input type="file" name="thumb_image" required class="custom-file-input form-control" id="customFile">
                                            <label class="custom-file-label" for="customFile">Choose file</label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <h5>Download Catalouge</h5>
                                        <div class="row">
                                            <div class="col-md-3 form-group">
                                                <label for="download_button_url_title">Button Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="download_button_url_title" id="download_button_url_title" placeholder="Button Title" required>
                                            </div>
                                            
                                            <div class="col-md-3 form-group">
                                                <label for="ar_download_button_url_title">Button Title (Arabic)</label>
                                                <input type="text" class="form-control" name="ar_download_button_url_title" id="ar_download_button_url_title" placeholder="Button Title in Arabic">
                                            </div>

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

                                    <div class="form-group">
                                        <h5>View Catalouge</h5>
                                        <div class="row">
                                            <div class="col-md-3 form-group">
                                                <label for="view_button_url_title">Button Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="view_button_url_title" id="view_button_url_title" placeholder="Button Title" required>
                                            </div>
                                            
                                            <div class="col-md-3 form-group">
                                                <label for="ar_view_button_url_title">Button Title (Arabic)</label>
                                                <input type="text" class="form-control" name="ar_view_button_url_title" id="ar_view_button_url_title" placeholder="Button Title in Arabic">
                                            </div>

                                            <div class="col-md-6 form-group">
                                                <label for="view_button_link">Button Url <span class="text-danger">*</span></label>
                                                <input type="url" class="form-control" name="view_button_link" id="view_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>
                            @else
                                <form class="forms-sample" method="post" enctype="multipart/form-data" action="{{route('admin.catalogue.update')}}">
                                    @csrf
                                    <input type="hidden" name="id" value="{{$catalogue->id}}">
                                    <div class="form-row">
                                        <div class="form-group col-md-6">
                                            <label for="title">Catalogue Title <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="name" name="title" value="{{$catalogue->title}}" required placeholder="Title">
                                        </div>
                                        <div class="form-group col-md-6">
                                            <label for="ar_title">Catalogue Title (Arabic)</label>
                                            <input type="text" class="form-control" id="ar_title" name="ar_title" value="{{$catalogue->ar_title}}" placeholder="Title">
                                        </div>
                                    </div>

                                    <div class="uploaded_files radio-group">
                                        @if(count($catalogues) > 0)
                                            <h3 class="card-title">Choose Catalogue File</h3>
                                            @foreach($catalogues as $key => $default_catalogue)
                                                @if(file_exists($default_catalogue->file))
                                                    <div class="col-md-2 uploaded_files_list radio mt-2 mb-3  {{($catalogue->selected_file == $default_catalogue->id) ? 'selected':''}} " data-value="{{$default_catalogue->id}}">
                                                        <img src="{{asset($default_catalogue->thumb_image)}}" class="">
                                                        <span class="icon"><i class="fa fa-check" aria-hidden="true"></i></span>
                                                    </div>
                                                @endif
                                            @endforeach
                                        @endif
                                    </div>

                                    <!-- <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-11">
                                                <label for="catalogue_file">Catalogue file (.pdf) </label>
                                                <div class="custom-file">
                                                    <input type="file" name="catalogue_file" accept=".pdf"  class="custom-file-input form-control" id="customFile">
                                                    <label class="custom-file-label" for="catalogue_file">Choose file</label>
                                                </div>
                                                @if(file_exists($catalogue->file))
                                                    <h6 class="mt-2"><span class="badge badge-dark" style="padding: 8px;font-weight: normal;">Uploaded Catalogue Url :  {{asset($catalogue->file)}}</span></h6>
                                                @endif
                                            </div>
                                            <div class="col-md-1">
                                                @if(file_exists($catalogue->file))
                                                    <a href="{{asset($catalogue->file)}}" target="_blank"><i class="fa fa-download fa_download" aria-hidden="true"></i></a>
                                                @else
                                                    
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-md-10">
                                                <label for="thumb_image">Catalogue Thumb Image</label>
                                                <div class="custom-file">
                                                    <input type="file" name="thumb_image" class="custom-file-input form-control" id="customFile">
                                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                @if(file_exists($catalogue->thumb_image))
                                                    <a href="{{asset($catalogue->thumb_image)}}" target="_blank"><img src="{{asset($catalogue->thumb_image)}}" style="width:100%;"></a>
                                                @else
                                                    
                                                @endif
                                            </div>
                                        </div>
                                    </div> -->
                                    
                                    <div class="form-group">
                                        <h5>Download Catalouge</h5>
                                        <div class="row">
                                            <div class="col-md-3 form-group">
                                                <label for="download_button_url_title">Button Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control"  value="{{$catalogue->download_btn_title}}" name="download_button_url_title" id="download_button_url_title" placeholder="Button Title" required>
                                            </div>
                                            
                                            <div class="col-md-3 form-group">
                                                <label for="ar_download_button_url_title">Button Title (Arabic)</label>
                                                <input type="text" class="form-control"  value="{{$catalogue->ar_download_btn_title}}" name="ar_download_button_url_title" id="ar_download_button_url_title" placeholder="Button Title in Arabic">
                                            </div>

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

                                    <div class="form-group">
                                        <h5>View Catalouge</h5>
                                        <div class="row">
                                            <div class="col-md-3 form-group">
                                                <label for="view_button_url_title">Button Title <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" value="{{$catalogue->view_btn_title}}" name="view_button_url_title" id="view_button_url_title" placeholder="Button Title" required>
                                            </div>
                                            
                                            <div class="col-md-3 form-group">
                                                <label for="ar_view_button_url_title">Button Title (Arabic)</label>
                                                <input type="text" class="form-control" value="{{$catalogue->ar_view_btn_title}}" name="ar_view_button_url_title" id="ar_view_button_url_title" placeholder="Button Title in Arabic">
                                            </div>

                                            <div class="col-md-6 form-group">
                                                <label for="view_button_link">Button Url <span class="text-danger">*</span></label>
                                                <input type="url" class="form-control" readonly value="{{$catalogue->view_btn_link}}" name="view_button_link" id="view_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>
                            @endif
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div> 

</div>
<script>
    function selectedCatalogue(id){  
        $("#data_loader").show();
        $.ajax({
            type: "GET",
            url: "{{route('admin.catalogue.file.selected')}}?id="+id,
            success: function (response) {
                console.log(response);
                $("#data_loader").hide();
                $("#view_button_link").val("{{asset('')}}"+response.data.file);
                $("#download_button_link").val("{{asset('')}}"+response.data.file);
            }
        });
    }

    $('.radio-group .radio').click(function(){
        $(this).parent().find('.radio').removeClass('selected');
        $(this).addClass('selected');
        var val = $(this).attr('data-value');
        // alert(val);
        selectedCatalogue(val);
        //$(this).parent().find('input').val(val);
    });
</script>
@endsection