@extends('layouts.app')

@section('content')
<style type="text/css">
.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  order: 2; /* move checkbox to the end */
  margin-left: auto; /* space between text and checkbox */
}

.form-check-label::before {
  font-weight: bold;
}

.bg-light {
    background-color: rgb(223 229 255) !important;
}

</style>
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-2 page-header-breadcrumb">
        <div>
        </div>
        <div class="main-dashboard-header-right">

        </div>
    </div>
    <!-- End Page Header -->

    <div class="row">

        <div class="col-xl-6">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                   <div class="card-title">
                      Login Banner
                   </div>
                </div>
                <div class="card-body">
                  <form class="formdata" enctype="multipart/form-data" novalidate>
                   @csrf

                   <div class="formAlert mb-2"></div>
                   <input type="hidden" name="posttype" value="bannerupload">
                   <div class="row">
                        <div class="col-md-12 mb-3">
                          <p class="text-muted">Browse Logo:</p>
                          <input type="file" name="loginpagebanner" class="form-control">
                        </div>
                        <div class="col-md-12 text-right">
                         <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                   </div>
                  </form> 
                  </div>
              </div>
        </div>


        <div class="col-xl-6">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                   <div class="card-title">
                      Dashboard Banner01
                   </div>
                </div>
                <div class="card-body">
                  <form class="formdata" enctype="multipart/form-data" novalidate>

                   @csrf
                   <div class="formAlert mb-2"></div>
                   <input type="hidden" name="posttype" value="bannerupload">
                   <div class="row">
                        <div class="col-md-12 mb-3">
                          <p class="text-muted">Browse Banner01:</p>
                          <input type="file" name="dashbordbanner1" class="form-control">
                        </div>
                        <div class="col-md-12 text-right">
                         <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                   </div>
                  </form> 
                  </div>
              </div>
        </div>

        <div class="col-xl-6">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                   <div class="card-title">
                      Dashboard Banner02
                   </div>
                </div>
                <div class="card-body">
                  <form class="formdata" enctype="multipart/form-data" novalidate>

                   @csrf
                   <div class="formAlert mb-2"></div>
                   <input type="hidden" name="posttype" value="bannerupload">
                   <div class="row">
                        <div class="col-md-12 mb-3">
                          <p class="text-muted">Browse Banner02:</p>
                          <input type="file" name="dashbordbanner2" class="form-control">
                        </div>
                        <div class="col-md-12 text-right">
                         <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                   </div>
                  </form> 
                  </div>
              </div>
        </div>

        <div class="col-xl-6">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                   <div class="card-title">
                      Dashboard Banner03
                   </div>
                </div>
                <div class="card-body">
                  <form class="formdata" enctype="multipart/form-data" novalidate>

                   @csrf
                   <div class="formAlert mb-2"></div>
                   <input type="hidden" name="posttype" value="bannerupload">
                   <div class="row">
                        <div class="col-md-12 mb-3">
                          <p class="text-muted">Browse Banner03:</p>
                          <input type="file" name="dashbordbanner3" class="form-control">
                        </div>
                        <div class="col-md-12 text-right">
                         <button type="submit" class="btn btn-primary">Update</button>
                        </div>
                   </div>
                  </form> 
                  </div>
              </div>
        </div>

    </div>


    <div class="row">

        <div class="col-xl-12">
            <div class="card">
               <div class="table-responsive custom-scroll">
                  <table class="table text-nowrap table-bordered" id="datatable">
                      <thead>                    
                        <tr>
                            <td>Login Banner</td>
                            <td>Dash-Banner 01</td>
                            <td>Dash-Banner 02</td>
                            <td>Dash-Banner 03</td>
                        </tr>
                       </thead>
                       <tbody>

                        <tr>
                            <td>
                                @if(!empty($companydata->loginbanner))
                                    <img src="{{ asset('banner') }}/{{$companydata->loginbanner}}" class="img-fluid" style="max-height:120px;">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>

                            <td>
                                @if(!empty($companydata->dashboardbanner1))
                                    <img src="{{ asset('banner') }}/{{$companydata->dashboardbanner1}}" class="img-fluid" style="max-height:120px;">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>

                            <td>
                                @if(!empty($companydata->dashboardbanner2))
                                    <img src="{{ asset('banner') }}/{{$companydata->dashboardbanner2}}" class="img-fluid" style="max-height:120px;">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>

                            <td>
                                @if(!empty($companydata->dashboardbanner3))
                                    <img src="{{ asset('banner') }}/{{$companydata->dashboardbanner3}}" class="img-fluid" style="max-height:120px;">
                                @else
                                    <span class="text-muted">No Image</span>
                                @endif
                            </td>
                        </tr>
                        </tbody>
                  </table>
                    </div>
                </div>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$('.formdata').on('submit', function(e) {
    e.preventDefault();

    let form = $(this);
    let formData = new FormData(this);
    let alertBox = form.find('.formAlert');
    let btn = form.find('button[type="submit"]');

    alertBox.html('<div class="alert alert-info">Submitting...</div>');
    btn.prop('disabled', true);

    $.ajax({
        url: "{{ route('savepostdata') }}",
        type: "POST",
        data: formData,
        contentType: false,
        processData: false,

        success: function(data) {
            if(data.status == 'success'){
               msgalert('success', data.message);
                alertBox.html('');

            }else{
                msgalert('warning', data.message);

            }
        },

        error: function(xhr) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                let messages = '<div class="alert alert-danger"><ul>';
                $.each(errors, function(key, val) {
                    messages += '<li>' + val[0] + '</li>';
                });
                messages += '</ul></div>';
                alertBox.html(messages);
            } else {
                alertBox.html('<div class="alert alert-danger">❌ Something went wrong.</div>');
            }
        },

        complete: function() {
            btn.prop('disabled', false);
        }
    });
});
</script>
@endsection