@extends('adminlte::page')

@section('title', 'Brand Book')

@section('content_header')
<!-- <h1>Brand Book</h1> -->
@stop

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Brand Book Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                    <li class="breadcrumb-item">Brand Book Management</li>
                    <li class="breadcrumb-item active">Brand Book</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">List of Brand Books</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-brand-book">
                            Add Brand Book
                        </button>
                    </div>

                    @if(session('success'))
                    <div class="alert alert-success alert-dismissible fade show mx-3" role="alert">
                        {{ session('success') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    @if(session('error'))
                    <div class="alert alert-danger alert-dismissible fade show mx-3" role="alert">
                        {{ session('error') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    @endif

                    <div class="card-body table-responsive">
                        <table id="example" class="table table-bordered table-striped ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Brand book Name</th>
                                    <th>Brand book File</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($brand_book as $value)
                                <tr>
                                    <td>{{ $value->id }}</td>
                                    <td>{{ $value->file_name }}</td>
                                    <td>
                                        @if($value->file_name)
                                            <a href="{{ asset('storage/distribution/files/brand_book_pdf/' . $value->file_name) }}" target="_blank">
                                                <i class="fas fa-file-pdf fa-2x text-danger"></i>
                                            </a>
                                        @else
                                            <span class="text-muted">No PDF File</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($value->status == 1)
                                            <span class="badge badge-success">Active</span>
                                        @else
                                            <span class="badge badge-danger">Inactive</span>
                                        @endif
                                    </td>
                                    <td class="text-center py-0 align-middle">
                                        <div class="btn-group btn-group-sm">
                                            <a href="javascript:void(0);" class="edit_brand_book"
                                                data-id="{{ $value->id }}"
                                                data-file_name="{{ $value->file_name }}"
                                                data-toggle="modal" data-target="#modal-edit-brand-book">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                            <a href="javascript:void(0)" class="status_change" data-id="{{ $value->id }}">
                                                <i class="fas fa-exchange-alt"></i> Toggle Status
                                            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                            <form id="delete-form-{{ $value->id }}" action="{{ route('admin.deleteTollyBrandBook', $value->id) }}" method="POST" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger delete_brand_book" data-id="{{ $value->id }}">
                                                    <i class="fas fa-trash"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Brand book Name</th>
                                    <th>Brand book File</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Add Brand Book Modal -->
<div class="modal fade" id="modal-add-brand-book" tabindex="-1" aria-labelledby="modal-add-brand-book-label" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header bg-primary text-white">
        <h4 class="modal-title" id="modal-add-brand-book-label">Add Brand Book</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <form id="add_brand_book_form" action="{{ route('admin.saveTollyBrandBook') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 mb-3">
              <label for="add_file" class="form-label">Brand Book PDF <span class="text-danger">*</span></label>
              <input type="file" name="file_name" id="add_file" class="form-control" accept="application/pdf">
              <small class="form-text text-muted">Only PDF files are allowed (max 5MB).</small>
              <p id="fileErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

              <!-- PDF preview -->
              <div id="add_pdf_preview_wrapper" class="mt-2" style="display:none;">
                <div class="d-flex align-items-center flex-wrap gap-2">
                  <span id="add_pdf_name" class="badge badge-light mr-2"></span>
                  <a id="add_pdf_view" href="#" target="_blank" class="btn btn-sm btn-outline-primary">View PDF</a>
                </div>
                <iframe id="add_pdf_iframe" src="" style="width:100%; height:400px; border:1px solid #ddd; border-radius:4px; margin-top:10px; display:none;"></iframe>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-plus-circle"></i> Save Brand Book
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Brand Book Modal -->
<div class="modal fade" id="modal-edit-brand-book" tabindex="-1" aria-labelledby="modal-edit-brand-book-label" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header bg-primary text-white">
        <h4 class="modal-title" id="modal-edit-brand-book-label">Edit Brand Book</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <form id="edit_brand_book_form" action="" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="id" id="edit_id">

        <div class="modal-body">
          <div class="row">
            <div class="col-md-12 mb-3">
              <label for="edit_file" class="form-label">Brand Book PDF</label>
              <input type="file" name="file_name" id="edit_file" class="form-control" accept="application/pdf">
              <small class="form-text text-muted">Upload a new PDF to replace the existing one (max 2MB).</small>
              <p id="fileEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

              <!-- Existing + new PDF preview -->
              <div id="edit_existing_pdf_wrapper" class="mt-2" style="display:none;">
                <div class="d-flex align-items-center flex-wrap gap-2">
                  <span class="mr-2">Current file:</span>
                  <a id="edit_existing_pdf_link" href="#" target="_blank" class="btn btn-sm btn-outline-secondary">Open current PDF</a>
                </div>
              </div>

              <div id="edit_pdf_preview_wrapper" class="mt-2" style="display:none;">
                <div class="d-flex align-items-center flex-wrap gap-2">
                  <span id="edit_pdf_name" class="badge badge-light mr-2"></span>
                  <a id="edit_pdf_view" href="#" target="_blank" class="btn btn-sm btn-outline-primary">View new PDF</a>
                </div>
                <iframe id="edit_pdf_iframe" src="" style="width:100%; height:400px; border:1px solid #ddd; border-radius:4px; margin-top:10px; display:none;"></iframe>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> Update Brand Book
          </button>
        </div>
      </form>
    </div>
  </div>
</div>      

@stop

@section('js')
<script>
    $('#example').DataTable();  

    $("#add_brand_book_form").submit(function(event) { 
        event.preventDefault();
        submitForm = $(this);
        submitBtn = $(this).find('#submit');
        $.ajax({
            url: $(this).attr('action'),
            data: new FormData(this),
            type: 'post',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,

            success: function(msg) {   
                $("#loader").css("display", 'none');
                submitBtn.attr("disabled", false).find('span').text('Save');

                submitForm.find("#fileErr").text('');

                submitForm.find("#add_file").removeClass('is-invalid').addClass('is-valid');

                if (msg.status == 422) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error(msg.msg);

                    $.each(msg.errors.file_name, function(i) {
                        submitForm.find("#fileErr").text(msg.errors.file_name[i]);
                        submitForm.find("#add_file").removeClass('is-valid').addClass('is-invalid');
                    });

                } else if (msg.status == 500) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error(msg.msg);
                    
                } else if (msg.status == 200) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.success(msg.msg);
                    submitForm.trigger('reset');

                    setTimeout(function() {
                        window.location.href = "{{ route('admin.showTollyBrandBook') }}";
                    }, 1000);

                }
            }
        });
    });

    $("#edit_brand_book_form").submit(function(event) {
        event.preventDefault();
        submitForm = $(this);
        submitBtn = $(this).find('#submit');
        $.ajax({
            url: $(this).attr('action'),
            data: new FormData(this),
            type: 'post',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,

            success: function(msg) {
                $("#loader").css("display", 'none');
                submitBtn.attr("disabled", false).find('span').text('Update');

                submitForm.find("#fileEditErr").text('');

                submitForm.find("#edit_file").removeClass('is-invalid').addClass('is-valid');

                if (msg.status == 422) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error(msg.msg);

                    $.each(msg.errors.file_name, function(i) {
                        submitForm.find("#fileEditErr").text(msg.errors.file_name[i]);
                        submitForm.find("#edit_file").removeClass('is-valid').addClass('is-invalid');
                    });

                } else if (msg.status == 500) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error(msg.msg);
                    
                } else if (msg.status == 200) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.success(msg.msg);

                    submitForm.trigger('reset');

                    setTimeout(function() {
                        window.location.href = "{{ route('admin.showTollyBrandBook') }}";
                    }, 1000);

                }
            }
        });
    });

    $('.edit_brand_book').on('click', function() {     
        const id = $(this).data('id');
        const file_name = $(this).data('file_name');

        // Set values into the edit modal fields
        $('#edit_id').val(id);

        // Set existing file preview if exists
        if (file_name) { 
            // Display the existing file in the preview
            $('#edit_file_preview').attr('src', `{{ asset('storage/distribution/files/brand_book_pdf') }}/${file_name}`);
            $('#edit_file_preview').show(); // Show the preview
        } else {
            // Hide the preview if there's no file
            $('#edit_file_preview').hide();
        }

        // Change the form action to 'update' URL
        $('#edit_brand_book_form').attr('action', `/admin/tolly-brand-book-cms/tolly-brand-book/edit/update/${id}`);
    });


    // // Status toggle
    // $('.status_change').click(function() {
    //     const brandBookId = $(this).data('id');

    //     Swal.fire({
    //         title: 'Are you sure?',
    //         text: "Do you want to change this Brand Book's status?",
    //         icon: 'question',
    //         showCancelButton: true,
    //         confirmButtonColor: '#17a2b8',
    //         cancelButtonColor: '#6c757d',
    //         confirmButtonText: 'Yes, change it!'
    //     }).then((result) => {
    //         if (result.isConfirmed) {
    //             window.location.href = '/admin/tolly-brand-book-cms/tolly-brand-book/status/' + brandBookId;
    //         }
    //     });
    // });

    // $('.delete_brand_book').on('click', function() { 
    //     const brandBookId = $(this).data('id');

    //     Swal.fire({
    //         title: 'Are you sure?',
    //         text: "Do you want to delete this Brand Book?",
    //         icon: 'warning',
    //         showCancelButton: true,
    //         confirmButtonColor: '#e3342f',
    //         cancelButtonColor: '#6c757d',
    //         confirmButtonText: 'Yes, delete it!',
    //     }).then((result) => {
    //         if (result.isConfirmed) {
    //             // Form will now be submitted after confirmation
    //             document.getElementById(`delete-form-${brandBookId}`).submit();
    //         }
    //     });
    // });

    $('.status_change').click(function() {
        var id = $(this).data('id');
        $('.ajs-error').click();
        Swal.fire({
            title: 'Are you sure to change status ?',
            text: "",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.value) {
                var status = 0;

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    data: {
                        id: id
                    },
                    type: 'POST',
                    url: "{{route('admin.statusTollyBrandBook')}}",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        '_token': "{{ csrf_token() }}",
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        console.log(res);

                        let data = JSON.parse(res);
                        console.log(typeof(data));
                        if (data.status == 200) {
                            // dataTable.draw();
                            alertify.set('notifier', 'position', 'top-right');
                            alertify.success(data.msg);
                            // location.reload();
                        } else {
                            alertify.set('notifier', 'position', 'top-right');
                            alertify.error(data.msg);
                        }

                        setTimeout(function() {
                            window.location.href = "{{ route('admin.showTollyBrandBook') }}";
                        }, 1000);
                    },
                    error: function(data) {
                        // console.log(data);
                    }
                });
            }
        })
    });

    $('.delete_brand_book').on('click', function(e) {
        var id = $(this).data('id');
        $('.ajs-error').click();
        Swal.fire({
            title: 'Are you sure to delete this Brand Book?',
            text: "",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
        }).then((result) => {
            if (result.value) {
                var status = 0;
                $.ajax({
                    data: {
                        id: id
                    },
                    type: 'POST',
                    url: "{{ route('admin.deleteTollyBrandBook') }}",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        '_token': "{{ csrf_token() }}",
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(res) {
                        console.log(res);

                        let data = JSON.parse(res);
                        console.log(typeof(data));
                        if (data.status == 200) {
                            alertify.set('notifier', 'position', 'top-right');
                            alertify.success(data.msg);

                            setTimeout(function() {
                                window.location.href = "{{ route('admin.showTollyBrandBook') }}";
                            }, 1000);
                        } else {
                            alertify.set('notifier', 'position', 'top-right');
                            alertify.error(data.msg);
                        }


                    },
                    error: function() {

                    }
                });
            }
        })
    });

    // function previewFile(input, previewId) {
    //     const preview = document.getElementById(previewId);
    //     if (input.files && input.files[0]) {
    //         const reader = new FileReader();
    //         reader.onload = function(e) {
    //             preview.src = e.target.result;
    //             preview.style.display = 'block';
    //         };
    //         reader.readAsDataURL(input.files[0]);
    //     }
    // }

    // // Add Brand Book Preview
    // document.getElementById('add_file').addEventListener('change', function() {
    //     previewFile(this, 'add_file_preview');
    // });

    // // Edit Brand Book Preview
    // document.getElementById('edit_file').addEventListener('change', function() {
    //     previewFile(this, 'edit_file_preview');
    // });
</script>


<script>
  function setupPdfPreview(inputSelector, nameSelector, linkSelector, wrapperSelector, iframeSelector) {
    const input   = document.querySelector(inputSelector);
    const nameEl  = document.querySelector(nameSelector);
    const linkEl  = document.querySelector(linkSelector);
    const wrapper = document.querySelector(wrapperSelector);
    const iframe  = document.querySelector(iframeSelector);

    if (!input) return;

    input.addEventListener('change', function () {
      const file = this.files && this.files[0];

      // Reset
      if (!file) {
        if (wrapper) wrapper.style.display = 'none';
        if (iframe)  { iframe.src = ''; iframe.style.display = 'none'; }
        return;
      }

      if (file.type !== 'application/pdf') {
        alert('Please select a PDF file.');
        this.value = '';
        if (wrapper) wrapper.style.display = 'none';
        if (iframe)  { iframe.src = ''; iframe.style.display = 'none'; }
        return;
      }

      const blobUrl = URL.createObjectURL(file);
      if (nameEl) nameEl.textContent = file.name + ' (' + Math.round(file.size/1024) + ' KB)';
      if (linkEl) linkEl.href = blobUrl;
      if (wrapper) wrapper.style.display = 'block';
      if (iframe) {
        iframe.src = blobUrl + '#toolbar=1&navpanes=0&statusbar=0';
        iframe.style.display = 'block';
      }
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    // Add modal: preview for new file
    setupPdfPreview('#add_file', '#add_pdf_name', '#add_pdf_view', '#add_pdf_preview_wrapper', '#add_pdf_iframe');

    // Edit modal: preview for file selection
    setupPdfPreview('#edit_file', '#edit_pdf_name', '#edit_pdf_view', '#edit_pdf_preview_wrapper', '#edit_pdf_iframe');

    // When clicking "Edit", populate existing file link
    $('.edit_brand_book').on('click', function () {
      const id        = $(this).data('id');
      const fileName  = $(this).data('file_name');

      $('#edit_id').val(id);

      if (fileName) {
        const existingUrl = `{{ asset('storage/distribution/files/brand_book_pdf') }}/${'__FILENAME__'}`.replace('__FILENAME__', fileName);
        $('#edit_existing_pdf_link').attr('href', existingUrl);
        $('#edit_existing_pdf_wrapper').show();
      } else {
        $('#edit_existing_pdf_wrapper').hide();
      }

      // Clear any previous "new file" preview
      $('#edit_pdf_preview_wrapper').hide();
      $('#edit_pdf_iframe').attr('src','').hide();
      $('#edit_file').val('');
    });
  });
</script>
@stop