@extends('adminlte::page')

@section('title', 'Event at Tolly Management')

@section('content_header')
<!-- <h1>Event at Tolly</h1> -->
@stop

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Event at Tolly 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">Event at Tolly Management</li>
                    <li class="breadcrumb-item active">Event at Tolly</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 Events at Tolly</h3>
                    </div>
                    <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add-event-at-tolly">
                            Add Event at Tolly
                        </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>Event Name</th>
                                    <th>Event File</th>
                                    <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($events as $value)
                                <tr>
                                    <td>{{ $value->id }}</td>
                                    <td>{{ $value->file_name }}</td>
                                    <td>
                                      @if($value->file_name)
                                        @php
                                            $extension = strtolower(pathinfo($value->file_name, PATHINFO_EXTENSION));
                                        @endphp

                                        @if($extension === 'pdf')
                                            <a href="{{ asset('storage/distribution/files/event_at_tolly_pdf/' . $value->file_name) }}" target="_blank">
                                                <i class="fas fa-file-pdf fa-2x text-danger"></i>
                                            </a>
                                        @elseif(in_array($extension, ['jpg','jpeg','png','gif','webp']))
                                            <a href="{{ asset('storage/distribution/files/event_at_tolly_pdf/' . $value->file_name) }}" target="_blank">
                                                <img src="{{ asset('storage/distribution/files/event_at_tolly_pdf/' . $value->file_name) }}" 
                                                    alt="Preview" 
                                                    style="max-width: 80px; max-height: 80px; border-radius: 4px;">
                                            </a>
                                        @else
                                            <span class="text-muted">Unsupported file type</span>
                                        @endif
                                      @else
                                          <span class="text-muted">No 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_event_at_tolly"
                                                data-id="{{ $value->id }}"
                                                data-file_name="{{ $value->file_name }}"
                                                data-toggle="modal" data-target="#modal-edit-event-at-tolly">
                                                <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.deleteEventAtTolly', $value->id) }}" method="POST" style="display:inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button" class="btn btn-danger delete_event_at_tolly" data-id="{{ $value->id }}">
                                                    <i class="fas fa-trash"></i> Delete
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>

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

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

      <form id="add_event_at_tolly_form" action="{{ route('admin.saveEventAtTolly') }}" 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">Event at Tolly PDF/Image File <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> -->
              <input type="file" name="file_name" id="add_file" class="form-control" accept="application/pdf,image/*">
              <small class="form-text text-muted">PDF or image (JPG, JPEG, PNG, GIF), max 2MB.</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 File</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>
                <img id="add_img_preview" alt="Preview" style="max-width:100%; height:auto; border:1px solid #ddd; border-radius:4px; margin-top:10px; display:none;" />

              </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 Event at Tolly
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

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

      <form id="edit_event_at_tolly_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">Event at Tolly 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> -->
              <input type="file" name="file_name" id="edit_file" class="form-control" accept="application/pdf,image/*">
            <small class="form-text text-muted">Upload a new PDF or image to replace the existing file (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 file</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>
                <img id="edit_img_preview" alt="Preview" style="max-width:100%; height:auto; border:1px solid #ddd; border-radius:4px; margin-top:10px; display:none;" />

              </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 Event at Tolly
          </button>
        </div>
      </form>
    </div>
  </div>
</div>      

@stop

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

    $("#add_event_at_tolly_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.showEventAtTolly') }}";
                    }, 1000);

                }
            }
        });
    });

    $("#edit_event_at_tolly_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.showEventAtTolly') }}";
                    }, 1000);

                }
            }
        });
    });

    $('.edit_event_at_tolly').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/event_at_tolly_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_event_at_tolly_form').attr('action', `/admin/event-at-tolly-cms/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.statusEventAtTolly')}}",
                    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.showEventAtTolly') }}";
                        }, 1000);
                    },
                    error: function(data) {
                        // console.log(data);
                    }
                });
            }
        })
    });

  $('.delete_event_at_tolly').on('click', function(e) {
    var id = $(this).data('id');
    $('.ajs-error').click();

    Swal.fire({
        title: 'Are you sure to delete this Event at Tolly?',
        text: "",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes'
    }).then((result) => {
        if (result.isConfirmed) {   //  use latest SweetAlert2 syntax
            $.ajax({
                data: { id: id },
                type: 'POST',
                url: "{{ route('admin.deleteEventAtTolly') }}",
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                success: function(res) {
                    console.log(res); // already JSON

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

                        // redirect after success
                        setTimeout(function() {
                            window.location.href = "{{ route('admin.showEventAtTolly') }}";
                        }, 1000);

                    } else {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(res.msg);
                    }
                },
                error: function() {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error("Something went wrong!");
                }
            });
        }
    })
});
</script>

<script>
  function setupFilePreview(inputSelector, nameSelector, linkSelector, wrapperSelector, iframeSelector, imgSelector) {
    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);
    const img     = document.querySelector(imgSelector);

    const resetPreview = () => {
      if (wrapper) wrapper.style.display = 'none';
      if (iframe)  { iframe.src = ''; iframe.style.display = 'none'; }
      if (img)     { img.src = ''; img.style.display = 'none'; }
      if (nameEl)  nameEl.textContent = '';
      if (linkEl)  linkEl.removeAttribute('href');
    };

    if (!input) return;

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

      // 2MB limit
      if (file.size > 2 * 1024 * 1024) {
        alert('File must not exceed 2MB.');
        this.value = '';
        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 (file.type === 'application/pdf') {
        if (iframe) { iframe.src = blobUrl + '#toolbar=1&navpanes=0&statusbar=0'; iframe.style.display = 'block'; }
      } else if (file.type.startsWith('image/')) {
        if (img) { img.src = blobUrl; img.style.display = 'block'; }
      } else {
        alert('Unsupported file type. Please select a PDF or image.');
        this.value = '';
        resetPreview();
      }
    });
  }

  document.addEventListener('DOMContentLoaded', function () {
    // Add modal preview (PDF or image)
    setupFilePreview(
      '#add_file', '#add_pdf_name', '#add_pdf_view',
      '#add_pdf_preview_wrapper', '#add_pdf_iframe', '#add_img_preview'
    );

    // Edit modal preview (PDF or image)
    setupFilePreview(
      '#edit_file', '#edit_pdf_name', '#edit_pdf_view',
      '#edit_pdf_preview_wrapper', '#edit_pdf_iframe', '#edit_img_preview'
    );

    // Edit: set action + existing file link; clear new preview
    $('.edit_event_at_tolly').on('click', function () {
      const id       = $(this).data('id');
      const fileName = $(this).data('file_name');

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

      // Set the form action (use your actual route/path)
      $('#edit_event_at_tolly_form').attr('action', `/admin/event-at-tolly-cms/edit/update/${id}`);

      if (fileName) {
        const existingUrl = `{{ asset('storage/distribution/files/event_at_tolly_pdf') }}/${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_img_preview').attr('src','').hide();
      $('#edit_file').val('');
    });
  });
</script>

@stop