@extends('dashboard.dashboard_layouts.dashboard_master')

@section('admin_dashboard_title')
Client Banner
@endsection

@section('admin_dashboard_css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<style>
</style>
@endsection

@section('admin_dashboard_content')
<div class="content dashboard-content h-100">
    <h1 class="dashboard-content-h1">Client Banner</h1>
    <div class="content-wrap">

        <!-- breadcrumb -->
        <div class="breadcrumb-header justify-content-between">
            <nav class="breadcrumb-4">
                <ol class="breadcrumb breadcrumb-style1">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}">Dashboard</a>
                    </li>
                    <li class="breadcrumb-item active">Client Banner</li>
                </ol>
            </nav>
        </div>

        <div class="row mx-auto">
            <div class="card card-body pd-20 pd-md-40  shadow-none">
                <form id="addbanner">
                    @csrf
                    <div class="">

                        <div class="row" id="newimage" style="display:block">
                            <div class="col-lg-12 text-center mb-2">
                                <br>
                                                                <img id="img_selected" src="{{asset(''.$img_banner)}}"
                                    alt="" style="height: 250px; width:1500px;object-fit:cover;">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-8 ">
                                <input type="file" name="client_banner" class="form-control imageChange">
                                <small>Upload <b>.JPG</b>,<b>.JPEG</b>,<b>.PNG</b>
                                </small>

                            </div>

                        </div>
                        <button class="btn btn-info" id="btnSubmit"> <i class="fa fa-spinner fa-spin fa-pulse"
                            style="display:none;"></i> Upload Banner</button>
                    </div>

                </form>
            </div>
        </div>
        {{-- @endif --}}

    </div>
</div>

@endsection

@section('admin_dashboard_script')

<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.1.10/dist/sweetalert2.all.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.2/jquery.twbsPagination.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(e) {

        $(document).on('change', '.imageChange', function(e) {
            // alert('')
            photoError = 0;
            if (e.target.files && e.target.files[0]) {
                // console.log(e.target.files[0].name.strtolower())
                if (e.target.files[0].name.match(/\.(jpg|jpeg|JPG|png|gif|PNG)$/)) {
                    $("#photo-error").empty();
                    photoError = 0;
                    var reader = new FileReader();

                    reader.onload = function(e) {
                        $('#img_selected').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(e.target.files[0]);
                    $("#newimage").css('display','block')

                } else {
                    photoError = 1;
                    $("#photo-error").empty();
                    $(".btnSubmit").prop('disabled', true);

                    $("#photo-error").append(
                        '<p class="text-danger">Please upload only jpg, png format!</p>');
                }
            } else {
                $('#img_selected').attr('src', '');
            }
        });

        // Submit Form
        $("#addbanner").on('submit', (function(e) {

            e.preventDefault();

            $.ajax({

                url: "/client-banner/add",

                type: "post",

                data: new FormData(this),

                dataType: "JSON",

                processData: false,

                contentType: false,

                cache: false,

                beforeSend: function() {

                    $("#btnSubmit").attr('disabled', true);

                    $(".fa-pulse").css('display', 'inline-block');

                },

                complete: function() {

                    $("#btnSubmit").attr('disabled', false);

                    $(".fa-pulse").css('display', 'none');

                },

                success: function(response) {

                    if (response["status"] == "fail") {

                        toastr.error('Failed', response["msg"])

                    } else if (response["status"] == "success") {
                        toastr.success('Success', response["msg"])
                        $("#addbanner")[0].reset();
                        // $("#newimage").css('display','none')
                    }

                },

                error: function(error) {

                    console.log(error);

                }

            });

        }));

    });
</script>

@endsection