@extends('Admin.Layout.Master')

@section('css')
    <style type="text/css">

    </style>
@endsection

@section('content-header')
    <div class="header py-1">
        <div class="container-fluid">
            <div class="header-body ">
                <div class="row">
                    <div class="col-lg-6 col-7 text-primary text-left">
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
                            <ol class="breadcrumb breadcrumb-links">
                                <li class="breadcrumb-item">
                                    <a href="#"><i class="fas fa-home text-primary"></i>
                                        Master
                                    </a>
                                </li>
                                <li class="breadcrumb-item"><a href="#">Service</a></li>
                                <li class="breadcrumb-item"><a href="#">Document Mapping</a></li>
                            </ol>
                        </nav>
                    </div>
                    <div class="col-lg-6 col-5 text-right">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('content')
    <form id="main-form-1" action="{{ url($url) }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="card">
            <div class="card-body">
                <h4>Upload Banner :</h4>
                <input type="hidden" class="form-control form-control-sm" name="service_id" value="{{$id}}">
                
                <div class="row">
                    <div class="col-md-2">
                        <input type="file" class="form-control form-control-sm" id="image" name="image[]" multiple>
                    </div>
                    <div class="col-md-3 text-left">
                        <button type="submit" class="btn btn-sm btn-primary">Upload</button>
                    </div>
                </div>
            </div>
        </div> <!--CARD-->
    </form>


    <form id="main-form" action="{{ !$id ? url($url) : url($url . '/' . $id) }}" method="post" enctype="multipart/form-data">
        @csrf
        @if ($id)
            @method('put')
        @endif

        <div class="card card-body">
            <div class="row m-0 mt-3">
                <div class="col-md-12">
                    <table id="document_table" class="table table-striped table-bordered">
                        <thead>
                            <th class="p-1">Sr</th>
                            <th class="p-1">Name</th>
                            <th class="p-1">URL</th>
                            <th class="p-1">IMAGE</th>
                            <th class="p-1 text-center">
                                Action
                            </th>
                        </thead>
                        <tbody id="tbody">
                            @if(count($banners))
                                @foreach($banners as $b)
                                    <tr>
                                        <td class="p-1">{{$loop->iteration}}</td>
                                        <td class="p-1">{{$b->name}}</td>
                                        <td class="p-1">{{$b->url}}</td>
                                        <td class="p-1">
                                            <img src="{{ asset($b->url) }}" class="d-block w-100" alt="{{ asset($b->url) }}"
                                            style="width:50px;height:50px"
                                            >
                                        </td>
                                        <td class="p-1">
                                            <button type="button" class="btn btn-sm btn-danger px-2 py-1" 
                                                    onclick="deleteBanner(this, '{{ $b->uid }}')">
                                                <i class="fas fa-minus-square"></i>
                                            </button>
                                        </td>                                        
                                    <tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div> <!--CARD-->
    </form>
@endsection


@push('footer_scripts_after_init')
    <script>
        function deleteBanner(e,banner_id) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Content-Type': 'application/json',
                },
                type: "POST",
                url: "{{ url('admin/master/service/banner/delete-banner') }}",
                data: JSON.stringify({'banner_id':banner_id}),
                success: function(data) {
                    if(data['status']==1){
                        $(e).closest('tr').remove(); 
                    }
                    alert(data['message']);
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    console.error('Error:', textStatus, errorThrown);
                }
            });
        }
    </script>
@endpush