@extends('layouts.app')

@section('title', $division->name)

@section('nav-items')
    <li><a href="{{ route('customer.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('customer.logos.index') }}">Logos</a></li>
    <li><a href="{{ route('customer.company-profile.index') }}">Company Profile</a></li>
@endsection

@section('styles')
<style>
    .division-header {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-bottom: 2rem;
        border: 1px solid var(--gray-200);
    }

    .division-title {
        font-size: 2rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 1rem;
    }

    .division-description {
        color: var(--gray-700);
        line-height: 1.6;
        font-size: 1rem;
    }

    .files-section {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        border: 1px solid var(--gray-200);
    }

    .files-grid {
        display: grid;
        gap: 1.5rem;
        margin-top: 1.5rem;
    }

    .file-card {
        padding: 1.5rem;
        background: var(--gray-50);
        border-radius: 8px;
        border: 1px solid var(--gray-200);
    }

    .file-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 1rem;
    }

    .file-name {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-900);
    }

    .file-type {
        padding: 0.25rem 0.75rem;
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .file-description {
        color: var(--gray-600);
        margin-bottom: 1rem;
    }

    .request-form {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        margin-top: 2rem;
        border: 2px dashed var(--gray-300);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .form-group input {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .form-group input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(227, 27, 35, 0.1);
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .info-box {
        background: rgba(59, 130, 246, 0.1);
        border: 1px solid rgba(59, 130, 246, 0.2);
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        color: var(--info);
        font-size: 0.875rem;
    }
</style>
@endsection

@section('content')
<div class="division-header">
    @if($division->logo_path)
        <img src="{{ asset('storage/' . $division->logo_path) }}" alt="{{ $division->name }}" style="max-width: 120px; margin-bottom: 1rem;">
    @endif
    <h1 class="division-title">{{ $division->name }}</h1>
    @if($division->description)
        <p class="division-description">{{ $division->description }}</p>
    @endif
</div>

<div class="files-section">
    <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--gray-900);">
        Available Files
    </h2>

    @if($division->files->count() > 0)
        <div class="files-grid">
            @foreach($division->files as $file)
                <div class="file-card">
                    <div class="file-header">
                        <div>
                            <div class="file-name">{{ $file->name }}</div>
                            <span class="file-type">{{ str_replace('_', ' ', $file->file_type) }}</span>
                        </div>
                    </div>
                    @if($file->description)
                        <div class="file-description">{{ $file->description }}</div>
                    @endif

                    <!-- Download Request Form -->
                    <div class="request-form">
                        <div class="info-box">
                            <strong>📧 Request to Download:</strong> Fill out the form below to request access to this file. 
                            Once approved by our administrator, you will receive an OTP code via email to download the file.
                        </div>
                        <form method="POST" action="{{ route('customer.download-request.store') }}">
                            @csrf
                            <input type="hidden" name="resource_type" value="division_file">
                            <input type="hidden" name="resource_id" value="{{ $file->id }}">
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="name_{{ $file->id }}">Full Name *</label>
                                    <input type="text" id="name_{{ $file->id }}" name="name" required>
                                </div>
                                <div class="form-group">
                                    <label for="email_{{ $file->id }}">Email Address *</label>
                                    <input type="email" id="email_{{ $file->id }}" name="email" required>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="company_{{ $file->id }}">Company</label>
                                    <input type="text" id="company_{{ $file->id }}" name="company">
                                </div>
                                <div class="form-group">
                                    <label for="phone_{{ $file->id }}">Phone</label>
                                    <input type="text" id="phone_{{ $file->id }}" name="phone">
                                </div>
                            </div>
                            
                            <button type="submit" class="btn btn-primary">
                                Request Download
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <p style="text-align: center; padding: 2rem; color: var(--gray-500);">No files available for this division.</p>
    @endif
</div>
@endsection