@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Banner')

<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <h1 class="h3 mb-2 text-gray-800">Add Banner</h1>
    <!-- DataTales Example -->
    <div class="innerpagedetails card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary"><a href="{{route('admin.banners')}}"><i
                        class="fa fa-chevron-left"></i></a>Add Banner</h6>
        </div>

        <div class="card-body">
            @if(Session::has('error'))
                <div class="alert alert-danger">
                    Banner image is required!
                </div>
            @endif
            <form method="post" action="{{route('admin.banner.add')}}" enctype="multipart/form-data">@csrf
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="area">Area</label>
                            <select name="area_id" class="form-control">
                                @foreach($areas as $area)
                                    <option value="{{ $area->id }}">{{ $area->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-6">
                        <div class="form-group">
                            <label>Add Banner Image</label><br/>
                            <img src="#" id="showimg" class="img-fluid" width="120">
                            <label for="img" style='cursor:pointer;'><img src="{{asset('admin/img/icon.png')}}" id="oldimg" class="img-fluid"></label><br>
                            <div class="d-none">
                                <input type="file" id="img" name="img" accept="image/*">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group">
                            <button class="btn-gazna" style="height:50px;font-size:14px;" type="submit">Save Banner
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
@if(Session::has('success'))
    <script>
        Swal.fire({
            title: 'Banner Add Successfully',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then(function () {
            window.location.href = '{{ route("admin.banners") }}';
        });
    </script>
@endif
<script>
    $(function () {
        $('#showimg').hide();
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#oldimg').hide();
                $('#showimg').show();
                $('#showimg').attr('src', e.target.result);

            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $('#img').on('change', function () {
        $('#error_msg').hide();
        readURL(this);
    });
</script>


@include('Admin.layouts.footer')
@include('Admin.layouts.modal')