@extends('layouts.dashboard')

@section('content')

<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
      <div class="container-full">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="d-flex align-items-center">
                <div class="me-auto">
                    <h3 class="page-title">Banner</h3>
                    <div class="d-inline-block align-items-center">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="mdi mdi-home-outline"></i></a></li>
                                <li class="breadcrumb-item" aria-current="page">Banner</li>
                                <li class="breadcrumb-item active" aria-current="page">View</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                
            </div>
        </div>

        <!-- Main content -->
        <section class="content">
          <div class="row">

            <div class="col-12">

             <div class="box">
                @include('layouts.flash-message')
                
                <!-- /.box-header -->
                <div class="box-body">
                    <div style="margin-bottom: 10px;">
                        <span class="btn btn-primary-light btn-sm" data-bs-toggle="modal" data-bs-target="#modal-default">
                            Add Banner
                        </span> 
                    </div>
                    <div class="table-responsive">
                      <table id="example1" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>S No</th>
                                <th>Image</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($banner)
                            @foreach($banner as $key => $value)
                            <tr>
                                <td>{{ $key + 1}}</td>
                                <td>
                                    <img src="{{ url('/') }}/public/banner/{{ $value->image }}" style="width: 50px;">
                                </td>
                                <td>{{ $value->status }}</td>
                                <td>
                                    <a onclick="ViewTaskModel('{{ $value->id }}')" class="btn btn-primary" style="padding: 4px 12px;margin: 0px 4px;"><i class="ion ion-edit text-white"></i></a>
                                    <a href="{{ route('banner.delete', $value->id) }}" class="btn btn-danger" style="padding: 4px 12px;margin: 0px 4px;"><i class="ti-trash text-white"></i></a>
                                </td>
                            </tr>
                            @endforeach
                            @endif
                        </tbody>
                      </table>
                    </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->

            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </section>
        <!-- /.content -->
      
      </div>
  </div>


  <!-- /.content-wrapper -->
  <!-- modal Area -->              
  <div class="modal fade" id="modal-default">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title">Banner</h4>
            <span class="btn-close" data-bs-dismiss="modal" aria-label="Close"></span>
          </div>
          <div class="modal-body">
            
            <form class="form" action="{{ route('banner.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="banner_id" id="banner_id">
            
            <div class="col-md-12">

                <div class="form-group" style="margin-bottom: 0px;">
                    <label class="form-label">Image</label>
                    <div class="input-group mb-3">
                        <input type="file" class="form-control @error('banner_image') is-invalid @enderror" id="banner_image" name="banner_image" placeholder="Image" value="{{ old('banner_image') }}">
                        <!-- <span class="input-group-text"><i class="ti-user"></i></span> -->
                    </div>
                    <input type="hidden" name="old_image" id="old_image" >
                    <img src="" id="image_url" style="width: 50px;">
                    @error('journal_image')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group" style="margin-bottom: 0px;">
                    <label class="form-label">Title</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" placeholder="Title" value="{{ old('title') }}">
                    </div>
                    @error('title')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group" style="margin-bottom: 0px;">
                    <label class="form-label">Description</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control @error('description') is-invalid @enderror" id="description" name="description" placeholder="Description" value="{{ old('description') }}">
                    </div>
                    @error('description')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group" style="margin-bottom: 0px;">
                    <label class="form-label">Content</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control @error('banner_content') is-invalid @enderror" id="banner_content" name="banner_content" placeholder="Content" value="{{ old('banner_content') }}">
                    </div>
                    @error('banner_content')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
                
                <div class="form-group" style="margin-bottom: 0px;">
                    <label class="form-label">Button Link</label>
                    <div class="input-group mb-3">
                        <input type="text" class="form-control @error('button_link') is-invalid @enderror" id="button_link" name="button_link" placeholder="Button Link" value="{{ old('button_link') }}">
                    </div>
                    @error('button_link')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

                <div class="form-group">
                    <label class="form-label">Status</label>
                    <div class="input-group mb-3">
                        <select class="form-control @error('status') is-invalid @enderror" name="status" id="status">
                            <option value="Active">Active</option>
                            <option value="In Active">In Active</option>
                        </select>
                    </div>
                    @error('status')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>

            </div>

            <div class="col-md-12">
                <div class="box-footer text-end">
                    <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                    <!-- <button type="submit" class="btn btn-primary">
                      <i class="ti-save-alt"></i> Save
                    </button> -->
                </div> 
            </div>
            </form>

          </div>
          
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
  </div>
<!-- /.modal -->

<script type="text/javascript">
    function ViewTaskModel(ref) {
        var ele = ref;
        // alert(ele);
        $.ajax({
            url: '{{ route('banner.edit') }}',
            method: "POST",
            data: {
                _token: '{{ csrf_token() }}', 
                id: ele
            },
            success: function (response) {
                console.log(response);
                $("#banner_id").val(response.banner_id);
                $("#old_image").val(response.old_image);
                $("#title").val(response.title);
                $("#description").val(response.description);
                $("#banner_content").val(response.banner_content);
                $("#button_link").val(response.button_link);
                $('#image_url').attr('src', response.image_url);
                $("#status option[value='"+response.status+"']").attr("selected","selected");
                $('#modal-default').modal('show');
            }
        });
    }
  </script>
@endsection