@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet"/>
  <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
@endpush

<style>
  .flash {
    animation: flash-animation 1s ease-in-out infinite;
  }

  @keyframes flash-animation {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
  }
  
  .badge {
    padding: 0.35em 0.65em;
    font-size: 0.875em;
    font-weight: 600;
  }
  
  .stat-card {
    border-left: 4px solid;
    transition: transform 0.3s ease;
  }
  
  .stat-card:hover {
    transform: translateY(-5px);
  }
  
  .stat-card.total {
    border-left-color: #007bff;
  }
  
  .btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    margin-right: 0.25rem;
  }

  /* Table styling */
  #dataTableExample {
    font-size: 0.8rem;
  }
  
  #dataTableExample th,
  #dataTableExample td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
  }
  
  #dataTableExample th {
    font-weight: 600;
    white-space: nowrap;
  }
  
  #dataTableExample td {
    word-wrap: break-word;
    white-space: normal;
  }
  
  .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
  }
  
  .btn-action {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
  }
  
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .drawing-preview {
    max-width: 100px;
    max-height: 60px;
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .drawing-preview:hover {
    transform: scale(1.5);
  }
  
  .pagination-info {
    font-size: 0.8rem;
    color: #6c757d;
  }
</style>

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Crane Management</a></li>
    <li class="breadcrumb-item active" aria-current="page">Crane Drawings</li>
  </ol>
</nav>

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@elseif (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
@endif

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Crane Drawings</h6>
        
        <!-- Statistics Card -->
        <div class="row mb-4">
          <div class="col-md-4">
            <div class="card stat-card total">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="text-muted mb-2">Total Drawings</h6>
                    <h4 class="mb-0">{{ $drawings->total() }}</h4>
                  </div>
                  <div class="bg-primary bg-opacity-10 p-3 rounded">
                    <i class="fas fa-drafting-compass text-primary"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-3">
          <!-- Crane filter dropdown -->
          <div>
            <select class="form-select form-select-sm" id="craneFilter" style="width: 200px;">
              <option value="">All Cranes</option>
              @foreach($cranes as $crane)
                <option value="{{ $crane->id }}" {{ request('crane_id') == $crane->id ? 'selected' : '' }}>
                  {{ $crane->company_name }}{{ $crane->serial_no }} ({{ $crane->tag_no }} )
                </option>
              @endforeach
            </select>
          </div>
          
          <!-- Add New Drawing button -->
          <div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addDrawingModal">
              <i class="fas fa-plus me-2"></i> Add New Drawing
            </button>
          </div>
        </div>

        <!-- Pagination Info -->
        <div class="pagination-info mb-2">
          Showing {{ $drawings->firstItem() }} to {{ $drawings->lastItem() }} of {{ $drawings->total() }} entries
        </div>

        <div class="table-responsive">
          <table id="dataTableExample" class="table table-sm compact">
            <thead class="bg-light">  
              <tr>
                <th style="width: 5%;">#</th>
                <th style="width: 20%;">Name</th>
                <th style="width: 15%;">Crane</th>
                <th style="width: 15%;">Drawing No</th>
                <th style="width: 15%;">Remarks</th>
                <th style="width: 15%;">Upload Date</th>
                <th style="width: 30%;">Actions</th>
              </tr>
            </thead>
            <tbody>
              @forelse($drawings as $drawing)
              <tr>
                <td>{{ $drawings->firstItem() + $loop->index }}</td>
                <td>{{ $drawing->name }}</td>
                <td>
                  @if($drawing->crane)
                    {{ $drawing->crane->company_name }} {{ $drawing->crane->serial_no }}({{ $drawing->crane->tag_no }})
                  @else
                    <span class="text-muted">Not assigned</span>
                  @endif
                </td>
                <td>{{ $drawing->drawing_no }}</td>
                <td>{{ $drawing->remarks }}</td>
                <td>{{ \Carbon\Carbon::parse($drawing->created_at)->format('d-M-Y') }}</td>
                <td style="white-space: nowrap;">
                  <div class="d-flex align-items-center" style="gap: 0.35rem;">
                     <!-- Preview Button -->
                    <button class="btn btn-info btn-icon btn-xs preview-drawing" 
                            title="Preview"
                            data-id="{{ $drawing->id }}"
                            data-type="{{ Str::lower(pathinfo($drawing->file_path, PATHINFO_EXTENSION)) }}">
                      <i class="fas fa-eye"></i>
                    </button>
                    
                    <a href="#" class="btn btn-primary btn-icon btn-xs edit-drawing" 
                       title="Edit" 
                       data-id="{{ $drawing->id }}"
                       data-name="{{ $drawing->name }}"
                       data-drawing_no="{{ $drawing->drawing_no }}"
                       data-remarks="{{ $drawing->remarks }}"
                       data-crane-id="{{ $drawing->crane_id }}">
                      <i data-feather="edit-2" width="12" height="12"></i>
                    </a>
                    
                    @if(in_array($userRole, [7, 8]))
                      <form action="{{ route('crane-drawings.destroy', $drawing->id) }}" method="POST" class="delete-form m-0">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger btn-icon btn-xs" title="Delete">
                          <i data-feather="trash-2" width="12" height="12"></i>
                        </button>
                      </form>
                    @endif
                  </div>
                </td>
              </tr>
              @empty
              <tr>
                <td colspan="7" class="text-center py-4">
                  <i class="fas fa-search fa-3x text-muted mb-3"></i>
                  <h5>No Drawings Found</h5>
                  <p class="text-muted">When drawings are added, they'll appear here</p>
                </td>
              </tr>
              @endforelse 
            </tbody>
          </table>
          
          <!-- Pagination Links -->
          <div class="mt-3">
            {{ $drawings->links() }}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Add Drawing Modal -->
<div class="modal fade" id="addDrawingModal" tabindex="-1" aria-labelledby="addDrawingModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addDrawingModalLabel">Add New Drawing</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="addDrawingForm" method="POST" action="{{ route('crane-drawings.store') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">
          <div class="mb-3">
            <label for="name" class="form-label">Drawing Name *</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          
          <div class="mb-3">
            <label for="crane_id" class="form-label">Associated Crane</label>
            <select class="form-select" id="crane_id" name="crane_id">
              <option value="">Select Crane</option>
              @foreach($cranes as $crane)
                <option value="{{ $crane->id }}">{{ $crane->company_name }}{{ $crane->serial_no }} ({{ $crane->tag_no }} )</option>
              @endforeach
            </select>
          </div>
          
          <div class="mb-3">
            <label for="drawing_no" class="form-label">Drawing No</label>
            <input type="text" class="form-control" id="drawing_no" name="drawing_no">
          </div>

          <div class="mb-3">
            <label for="remarks" class="form-label">Remarks *</label>
            <input type="text" class="form-control" id="remarks" name="remarks" required>
          </div>
          
          <div class="mb-3">
            <label for="file" class="form-label">Drawing File *</label>
            <input type="file" class="form-control" id="file" name="file" accept=".pdf,.jpg,.jpeg,.png,.dwg" required>
            <small class="text-muted">Accepted formats: PDF, JPG, PNG, DWG (Max: 100MB)</small>
            <div id="file_preview" class="mt-2"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Upload Drawing</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Drawing Modal -->
<div class="modal fade" id="editDrawingModal" tabindex="-1" aria-labelledby="editDrawingModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editDrawingModalLabel">Edit Drawing</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editDrawingForm" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="modal-body">
          <div class="mb-3">
            <label for="edit_name" class="form-label">Drawing Name *</label>
            <input type="text" class="form-control" id="edit_name" name="name" required>
          </div>
          
          <div class="mb-3">
            <label for="edit_drawing_no" class="form-label">Drawing No</label>
            <input type="text" class="form-control" id="edit_drawing_no" name="drawing_no">
          </div>
          
          <div class="mb-3">
            <label for="edit_remarks" class="form-label">Remarks *</label>
            <textarea class="form-control" id="edit_remarks" name="remarks" rows="3" required></textarea>
          </div>
          
          <div class="mb-3">
            <label for="edit_crane_id" class="form-label">Associated Crane</label>
            <select class="form-select" id="edit_crane_id" name="crane_id">
              <option value="">Select Crane (optional)</option>
              @foreach($cranes as $crane)
                <option value="{{ $crane->id }}">{{ $crane->company_name }}{{ $crane->serial_no }} ({{ $crane->tag_no }} )</option>
              @endforeach
            </select>
          </div>
          
          <div class="mb-3">
            <label for="edit_file" class="form-label">Update Drawing File</label>
            <input type="file" class="form-control" id="edit_file" name="file" accept=".pdf,.jpg,.jpeg,.png,.dwg">
            <small class="text-muted">Leave blank to keep current file (Accepted formats: PDF, JPG, PNG, DWG, Max: 100MB)</small>
            <div id="edit_file_preview" class="mt-2"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Drawing Preview</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <div id="unsupportedPreview" style="display: none;">
          <div class="text-center py-4">
            <i class="fas fa-file fa-5x text-secondary mb-3"></i>
            <h4>Preview not available</h4>
            <p>This file type cannot be previewed in the browser.</p>
          </div>
        </div>
        <img id="previewImage" src="" class="img-fluid" style="max-height: 80vh; display: none;">
        <iframe id="previewPdf" src="" style="width: 100%; height: 80vh; display: none;"></iframe>
      </div>
      <div class="modal-footer">
        @if(in_array($userRole, [7, 8]))
        <a href="#" id="downloadFull" class="btn btn-primary">
          <i class="fas fa-download me-2"></i> Download File
        </a>
        @endif
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
<script>
$(document).ready(function() {
    // ========== CRANE FILTER ==========
    $('#craneFilter').change(function() {
        const selectedCrane = $(this).val();
        const url = new URL(window.location.href);
        
        if (selectedCrane) {
            url.searchParams.set('crane_id', selectedCrane);
        } else {
            url.searchParams.delete('crane_id');
        }
        
        window.location.href = url.toString();
    });

    // ========== EDIT DRAWING ==========
    $('.edit-drawing').click(function(e) {
        e.preventDefault();
        const drawingId = $(this).data('id');
        const drawingName = $(this).data('name');
        const drawingNo = $(this).data('drawing_no');
        const remarks = $(this).data('remarks');
        const craneId = $(this).data('crane-id');
        
        $('#editDrawingForm').attr('action', '/crane-drawings/' + drawingId);
        $('#edit_name').val(drawingName);
        $('#edit_drawing_no').val(drawingNo);
        $('#edit_remarks').val(remarks);
        $('#edit_crane_id').val(craneId);
        $('#editDrawingModal').modal('show');
    });

    // ========== DELETE HANDLING ==========
    $('.delete-form').submit(function(e) {
        e.preventDefault();
        const form = $(this);
        
        Swal.fire({
            title: 'Are you sure?',
            text: 'This drawing will be permanently deleted.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
        }).then((result) => {
            if (result.isConfirmed) {
                form.off('submit').submit();
            }
        });
    });

    // ========== FILE PREVIEW ==========
    $('#file, #edit_file').change(function() {
        const file = this.files[0];
        if (!file) return;
        
        const previewContainer = $(this).siblings('[id$="_preview"]');
        const reader = new FileReader();
        
        reader.onload = function(e) {
            let previewHtml = '';
            
            if (file.type.includes('image')) {
                previewHtml = `<img src="${e.target.result}" class="img-thumbnail" style="max-height: 150px;">`;
            } else if (file.type === 'application/pdf') {
                previewHtml = `<i class="fas fa-file-pdf fa-3x text-danger"></i><div>PDF Document</div>`;
            } else if (file.name.toLowerCase().endsWith('.dwg')) {
                previewHtml = `<i class="fas fa-file-alt fa-3x text-primary"></i><div>DWG File</div>`;
            } else {
                previewHtml = `<i class="fas fa-file fa-3x text-secondary"></i><div>${file.name}</div>`;
            }
            
            previewContainer.html(previewHtml);
        };
        
        if (file.type.includes('image')) {
            reader.readAsDataURL(file);
        } else {
            previewContainer.html(`<i class="fas fa-file-upload fa-3x text-primary"></i><div>${file.name}</div>`);
        }
    });

    // ========== FORM VALIDATION ==========
    function validateForm(form) {
        const fileInput = form.find('input[type="file"]')[0];
        
        // Check file size if a file is selected
        if (fileInput.files.length > 0) {
            const fileSize = fileInput.files[0].size; // in bytes
            const maxSize = 100 * 1024 * 1024; // 100MB in bytes
            
            if (fileSize > maxSize) {
                Swal.fire('Error!', 'File size exceeds the 100MB limit', 'error');
                return false;
            }
        }
        return true;
    }

    // ========== FORM SUBMISSION ==========
    $('#addDrawingForm').submit(function(e) {
        e.preventDefault();
        const form = $(this);
        
        if (!validateForm(form)) return false;
        
        const submitBtn = form.find('button[type="submit"]');
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Uploading...');
        
        $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(response) {
                $('#addDrawingModal').modal('hide');
                Swal.fire('Success!', 'Drawing uploaded successfully', 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                let errorMessage = xhr.responseJSON?.message || 'Failed to upload drawing';
                if (xhr.status === 422) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join('\n');
                }
                Swal.fire('Error!', errorMessage, 'error');
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('Upload Drawing');
            }
        });
    });

    $('#editDrawingForm').submit(function(e) {
        e.preventDefault();
        const form = $(this);
        
        if (!validateForm(form)) return false;
        
        const submitBtn = form.find('button[type="submit"]');
        submitBtn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...');
        
        $.ajax({
            type: "POST",
            url: form.attr('action'),
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function(response) {
                $('#editDrawingModal').modal('hide');
                Swal.fire('Success!', 'Drawing updated successfully', 'success')
                    .then(() => location.reload());
            },
            error: function(xhr) {
                let errorMessage = xhr.responseJSON?.message || 'Failed to update drawing';
                if (xhr.status === 422) {
                    errorMessage = Object.values(xhr.responseJSON.errors).join('\n');
                }
                Swal.fire('Error!', errorMessage, 'error');
            },
            complete: function() {
                submitBtn.prop('disabled', false).html('Save Changes');
            }
        });
    });

    // ========== PREVIEW DRAWING ==========
    $('body').on('click', '.preview-drawing', function(e) {
        e.preventDefault();
        const drawingId = $(this).data('id');
        const fileType = $(this).data('type');
        
        const previewUrl = `/crane-drawings/${drawingId}/preview`;
        const modal = $('#previewModal');
        
        // Hide all preview elements
        modal.find('#unsupportedPreview').hide();
        modal.find('#previewImage').hide();
        modal.find('#previewPdf').hide();
        
        // Set download link
        modal.find('#downloadFull').attr('href', `/crane-drawings/${drawingId}/download`);
        
        // Show loading state
        modal.find('.modal-body').html('<div class="text-center py-5"><div class="spinner-border text-primary" role="status"></div><p>Loading preview...</p></div>');
        modal.modal('show');
        
        // Determine content type
        if (['jpg', 'jpeg', 'png', 'gif'].includes(fileType)) {
            // Image preview
            modal.find('.modal-body').html(`<img id="previewImage" src="${previewUrl}" class="img-fluid" style="max-height: 80vh;">`);
        } else if (fileType === 'pdf') {
            // PDF preview
            modal.find('.modal-body').html(`<iframe id="previewPdf" src="${previewUrl}" style="width: 100%; height: 80vh;"></iframe>`);
        } else {
            // Unsupported format
            modal.find('.modal-body').html(`
                <div id="unsupportedPreview">
                    <div class="text-center py-4">
                        <i class="fas fa-file fa-5x text-secondary mb-3"></i>
                        <h4>Preview not available</h4>
                        <p>This file type cannot be previewed in the browser.</p>
                        <a href="${previewUrl}" class="btn btn-primary mt-3" download>
                            <i class="fas fa-download me-2"></i> Download File
                        </a>
                    </div>
                </div>
            `);
        }
    });

    // Close modal cleanly when hidden
    $('#previewModal').on('hidden.bs.modal', function () {
        $(this).find('.modal-body').html(`
            <div id="unsupportedPreview" style="display: none;"></div>
            <img id="previewImage" src="" class="img-fluid" style="max-height: 80vh; display: none;">
            <iframe id="previewPdf" src="" style="width: 100%; height: 80vh; display: none;"></iframe>
        `);
    });

    // Reset forms when modals are closed
    $('#addDrawingModal, #editDrawingModal').on('hidden.bs.modal', function() {
        $(this).find('form')[0].reset();
        $(this).find('[id$="_preview"]').empty();
        $('.is-invalid').removeClass('is-invalid');
        $('.invalid-feedback').remove();
    });

    // Flash message timeout
    setTimeout(function() {
        $('.alert').fadeOut('slow');
    }, 5000);
});
</script>
@endpush