@extends('admin.layouts.master')
@section('headerFiles')
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/datatables.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/table/datatable/custom_dt_zero_config.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ admin_asset('admin-assets/plugins/jqvalidation/custom-jqBootstrapValidation.css') }}">
    <link href="{{ admin_asset('admin-assets/plugins/notification/toastr/toastr.min.css') }}" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->    
    <style type="text/css">
        .error{
            color: red;
            display: block;
        }

    </style>
@endsection

@section('content')

<div class="container">
    <div class="page-header">
        <div class="page-title">
            <h3>{{ $page_title }}</h3>
        </div>
    </div>

    <div class="row layout-spacing ">
        @if ( session('error'))
            <div class="alert alert-danger alert-dismissable custom-danger-box" style="margin: 15px;">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <strong> {{ session('error') }} </strong>
            </div>
        @endif

        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12  layout-spacing">
            <div class="statbox widget box box-shadow">
                
                <div class="widget-content widget-content-area">
                    <form method="post" action="{{route('admin.category.save')}}" id="admin-form" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{ $category->id }}">
                        @csrf
                        <div class="row  d-flex justify-content-between align-items-center">
                            <div class="col-md-6 form-group">
                                <label>Text en  *</label>
                                <input type="text" name="name_en" class="form-control jqv-input" data-jqv-required="true"
                                    value="{{$category->name_en}}" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Text ar</label>
                                <input type="text" name="name_ar" class="form-control jqv-input" data-jqv-required="true"
                                    value="{{$category->name_ar}}">
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Sort Order  *</label>
                                <input type="number" name="sort_order" class="form-control jqv-input" data-jqv-required="true"
                                    value="{{$category->sort_order ?  $category->sort_order : 1}}" min="1" required>
                            </div>
                            <div class="col-md-6 form-group">
                                <label>Status *</label>
                                <select name="status" class="form-control" required>
                                    <option  value="1">Active</option>
                                    <option selected value="0">In Active</option>
                                </select>
                            </div>

                            <div class="col-md-6 form-group">
                                <label>Upload Product Image @if ($category->banner_image != '') <a target="blank" href="{{ $category->banner_image }}"><i class="flaticon-eye"></i></a> @endif</label>
                                <div class="custom-file">
                                    <input type="file" class="custom-file-input jqv-input" name="banner_image"
                                        data-role="file-image" data-width="320" data-height="200" data-preview="image-preview" 
                                        data-jqv-required="true" name="image" id="product-image" accept=".jpg, .jpeg, .png">
                                    <label class="custom-file-label" for="customFile">Choose file</label>
                                </div>
                            </div>
                            @if ($category->banner_image)
                            <div  class="col-md-6 form-group" >
                                <img id="image-preview" style="width:100px; height:90px;" class="img-responsive mb-2"  data-image="{{public_url()}}{{ $category->banner_image }}" src="{{public_url()}}{{ $category->banner_image }}">
                              </div>
                              @endif
                            <div class="col-md-12 text-center mt-3">
                                <button type="submit" class="mt-4 btn btn-button-7">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
    </div>

</div>

@endsection

@section('footerJs')
<script src="{{ admin_asset('admin-assets/plugins/jqvalidation/jqBootstrapValidation-1.3.7.min.js') }}"></script>
<script src="{{ admin_asset('admin-assets/plugins/jqvalidation/jqBootstrapValidation-1.3.7.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script>

    $(".form-validate").submit(function(e) {
        e.preventDefault();
    }).validate({
        rules: {
            youtube_video_link: {
                required: true,
                url: true
            }          
        },
        messages: {
            youtube_video_link: {
                required: "Please enter youtube video link",
                url: "Please enter valid url link"
            }
        },
        submitHandler: function(form) { 
            $.ajax({
                type:'POST',
                url: "{{ route("admin.video.add_edit_save")}}",
                data: $('.form-validate').serialize(),
                success: function(response) {
                    if(response.success){
                        toastr["success"](response.message);
                        setTimeout(function(){ 
                            window.location.href = "{{ route("admin.video.list")}}";
                        }, 2000);                        
                    } else {
                        toastr["error"](response.message);
                    }
                }            
            });
        }
    });

    $(document).ready(function(){
        if ($("#id").val()) {
           get_youtube_video_image();
        }
    });

    function get_youtube_video_image(){
        if ($("#id").val() != null) {
            var video_id = $("#youtube_video_id").val();
            if(video_id){
                var image_path = '<img width="300" height="170" src="https://img.youtube.com/vi/'+video_id+'/maxresdefault.jpg">';
                $("#youtube_image").html(image_path);
            }
        } else{
            var youtube_video_link = $("#youtube_video_link").val();
            var video_id = youtube_video_link.split('v=')[1];
            var ampersandPosition = video_id.indexOf('&');
            if(ampersandPosition != -1) {
                video_id = video_id.substring(0, ampersandPosition);
            }
            var image_path = '<img width="300" height="170" src="https://img.youtube.com/vi/'+video_id+'/maxresdefault.jpg">';            
            $("#youtube_video_id").val(video_id);
            $("#youtube_image").html(image_path);
        }
    }
</script>

@endsection