@extends('adminlte::page')

@section('title', 'Downloads Management')

@section('content_header')
<!-- <h1>Downloads Management</h1> -->
@stop

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Downloads 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">Downloads Management</li>
                    <li class="breadcrumb-item active">Download</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 Downloads</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-download">
                            Add Download
                        </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>Download Type</th>
                                    <th>Download Name</th>
                                    <th>Download File</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($downloads as $value)
                                <tr>
                                    <td>{{ $value->id }}</td>
                                    <td>
                                        @if($value->download_type == 0)
                                            Association of Articles
                                        @elseif($value->download_type == 1)
                                            Tolly Birds and Trees
                                        @else
                                            <span class="text-muted">Unknown Type</span>
                                        @endif
                                    </td>
                                    <td>{{ $value->file_name }}</td>
                                    <td>
                                        @if($value->file_name)
                                            <a href="{{ asset('storage/distribution/files/download_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_download"
                                                data-id="{{ $value->id }}" 
                                                data-download_type="{{ $value->download_type }}"
                                                data-file_name="{{ $value->file_name }}"
                                                data-toggle="modal" data-target="#modal-edit-download">
                                                <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.deleteDownloads', $value->id) }}" method="POST" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger delete_download" data-id="{{ $value->id }}">
                                                    <i class="fas fa-trash"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

                            <tfoot>
                                <tr>
                                    <th>ID</th>
                                    <th>Download Type</th>
                                    <th>Download Name</th>
                                    <th>Download File</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Add Download Modal -->
<div class="modal fade" id="modal-add-download" tabindex="-1" aria-labelledby="modal-add-download-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-download-label">Add Download</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <form id="add_download_form" action="{{ route('admin.saveDownloads') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="row">

            <!-- Download Type -->
            <div class="col-md-12 mb-3">
            <label for="download_type" class="form-label">Download Type <span class="text-danger">*</span></label>
            <p>Please select a download type from the options below:</p> <!-- Added description -->
            <select name="download_type" id="download_type" class="form-control">
                <option value="">Select Download Type</option>
                <option value="0">Article of Association</option>
                <option value="1">Tolly Birds and Trees</option>
            </select>
            <p id="download_typeErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
            </div>

            <div class="col-md-12 mb-3">
              <label for="add_file" class="form-label">Download 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 2MB).</small>
              <p id="file_nameErr" 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 Downloads
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Download Modal -->
<div class="modal fade" id="modal-edit-download" tabindex="-1" aria-labelledby="modal-edit-download-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-download-label">Edit Download</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <form id="edit_download_form" action="{{ route('admin.updateDownloads') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="id" id="edit_id">

        <div class="modal-body">
          <div class="row">

           <!-- Download Type -->
            <div class="col-md-12 mb-3">
              <label for="edit_download_type" class="form-label">Download Type</label>
              <select name="download_type" id="edit_download_type" class="form-control">
                <option value="">Select Download Type</option>
                <option value="0">Association of Articles</option>
                <option value="1">Tolly Birds and Trees</option>
              </select>
              <p id="download_typeEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
            </div>
            
            <div class="col-md-12 mb-3">
              <label for="edit_file" class="form-label">Download 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="file_nameEditErr" 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 Downloads
          </button>
        </div>
      </form>
    </div>
  </div>
</div>      

@stop

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

    $("#add_download_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("#file_nameErr").text('');
                submitForm.find("#download_typeErr").text('');

                submitForm.find("#add_file").removeClass('is-invalid').addClass('is-valid');
                submitForm.find("#download_type").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("#file_nameErr").text(msg.errors.file_name[i]);
                        submitForm.find("#add_file").removeClass('is-valid').addClass('is-invalid');
                    });

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

                    // Handle validation errors
                    // $.each(response.errors, function(key, value) {
                    //     $('#' + key + 'Err').text(value[0]); // Display validation error
                    //     $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                    // });

                } 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.showDownloads') }}";
                    }, 1000);

                }
            }
        });
    });

    $("#edit_download_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("#file_nameEditErr").text('');
                submitForm.find("#download_typeEditErr").text('');

                submitForm.find("#edit_file").removeClass('is-invalid').addClass('is-valid');
                submitForm.find("#edit_download_type").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("#file_nameEditErr").text(msg.errors.file_name[i]);
                        submitForm.find("#edit_file").removeClass('is-valid').addClass('is-invalid');
                    });

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

                    // Handle validation errors
                    // $.each(response.errors, function(key, value) {
                    //     $('#' + key + 'EditErr').text(value[0]); // Display validation error
                    //     $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                    // });

                } 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.showDownloads') }}";
                    }, 1000);

                }
            }
        });
    });

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

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

    //     // Set the dropdown selected option
    //     $('#edit_download_type').val(download_type);

    //     // 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/download_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_download_form').attr('action', `/admin/downloads/edit/update/${id}`);
    // });


   
    $('.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.statusDownloads')}}",
                    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.showDownloads') }}";
                        }, 1000);
                    },
                    error: function(data) {
                        // console.log(data);
                    }
                });
            }
        })
    });

    $('.delete_download').on('click', function(e) {
        var id = $(this).data('id');
        $('.ajs-error').click();
        Swal.fire({
            title: 'Are you sure to delete this Download?',
            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.deleteDownloads') }}",
                    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.showDownloads') }}";
                            }, 1000);
                        } else {
                            alertify.set('notifier', 'position', 'top-right');
                            alertify.error(data.msg);
                        }


                    },
                    error: function() {

                    }
                });
            }
        })
    });

</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_download').on('click', function () {  
      const id        = $(this).data('id');
      const fileName  = $(this).data('file_name');
        const download_type = $(this).data('download_type');  
        // Set values into the edit modal fields
        $('#edit_id').val(id);

        // Set the dropdown selected option
        $('#edit_download_type').val(download_type);

      if (fileName) {
        const existingUrl = `{{ asset('storage/distribution/files/download_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('');

        // Change the form action to 'update' URL
        // $('#edit_download_form').attr('action', `/admin/downloads/edit/update/${id}`);
    });
  });
</script>
@stop