@extends('layouts.admin.admin')
@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-6">
                            <h5 class="card-title">Banners</h5>
                        </div>
                        <div class="col-6">
                            <a class="btn btn-outline-tumblr float-right add_btn" href="{{ route('admin_frontend_banner') }}">
                                <i class="fa fa-arrow-left"></i>
                                Back
                            </a>
                            <a href="#" class="btn btn-outline-tumblr float-right add_btn"
                                data-href="{{ route('admin_frontend_banner_store') }}" data-add_href="{{ route('admin_frontend_banner_add') }}"
                                data-toggle="modal" data-target="#formemodal">
                                <i class="fa fa-plus"></i>
                                Add
                            </a>
                        </div>
                    </div>
                </div>
                <div class="table_content">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table text-center">
                                <tr>
                                    <td colspan="3">
                                        <img src="{{ asset(''.$banner->image) }}" style="width: 100%" alt="banner">
                                    </td>
                                </tr>
                                <tr>
                                    <td>Title</td>
                                    <td>:</td>
                                    <td>{{ $banner->title }}</td>
                                </tr>
                                <tr>
                                    <td>Subtitle</td>
                                    <td>:</td>
                                    <td>{{ $banner->subtitle }}</td>
                                </tr>
                                <tr>
                                    <td>Url</td>
                                    <td>:</td>
                                    <td>{{ $banner->url }}</td>
                                </tr>
                                <tr>
                                    <td>Creator</td>
                                    <td>:</td>
                                    <td>{{ $banner->creator_info->name }}</td>
                                </tr>
                                <tr>
                                    <td>Created At</td>
                                    <td>:</td>
                                    <td>{{ $banner->created_at->format('d,M Y') }}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-animation-1" style="display: none;" aria-hidden="true">
        <div class="modal-dialog ">
            <div class="modal-content animated flipInX">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-trash text-danger"></i> Delete</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6>Sure want to delete?</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal"><i class="fa fa-times"></i>
                        Close</button>
                    <a href="" id="delete_confirm_btn" class="btn btn-danger"><i class="fa fa-check-square-o"></i>
                        Delete</a>
                </div>
            </div>
        </div>
    </div>

    {{-- add update modal --}}
    <div class="modal fade" id="formemodal" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-md ">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fa fa-edit"></i> Update</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="progress-wrapper">
                        <div class="progress mb-4" style="height:5px;">
                            <div class="progress-bar form_progress_bar gradient-hossein" style="width: 0%;"></div>
                        </div>
                    </div>
                    <form action="#" id="add_update_form" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form_content">

                        </div>
                        <div class="form-group">
                            <button type="button" class="btn update_btn btn-light px-5"><i class="fa fa-upload"></i>
                                Submit</button>
                            <button type="reset" class="btn btn-outline-danger px-5"><i class="fa fa-download"></i>
                                Reset</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection