@extends('layouts.app')

@section('title', 'Create Release')
@section('idname', 'single')

@section('content')
<div class="container" style="margin-top: 200px;">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <div class="container-custom">
        <div class="card-custom">
            <div class="form">
                <div class="container mt-5">
                    <button class="custom-button">Create a Release</button>
                </div>
                <div class="right-side">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                    <form action="" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="title">Title</label>
                                <input type="text" class="form-control" name="title" placeholder="Write here" required>
                                <small class="form-text text-muted">
                                    Indicate the name of this release as it should appear publicly. The title must be accurate and correctly formatted in the language of the release and must not include names of artists or any additional information.
                                </small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="isrc">Version (optional)</label>
                                <input type="text" class="form-control" name="isrc" placeholder="Write here">
                                <small class="form-text text-muted">
                                    Indicate how to differentiate this release from the original if it is a different version (e.g. Remix, Live, Radio Edit, Bonus Track Version, etc.).
                                </small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="language">Language of the Titles</label>
                                <input type="text" class="form-control" name="language" placeholder="Write here" required>
                                <small class="form-text text-muted">
                                    Select the language in which the release and tracks titles are written.
                                </small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="release_type">Release Type</label>
                                <select class="form-control" name="release_type" required>
                                    <option value="Single">Single</option>
                                    <option value="EP">EP</option>
                                    <option value="Album">Album</option>
                                    <option value="Compilation">Compilation</option>
                                </select>
                                <small class="form-text text-muted">
                                    Select the type of release from Album (at least 30 minutes of music or 7 tracks), Single (up to 3 tracks of less than 10 minutes each), EP (up to 3 tracks with a track of at least 10 minutes and a total length of up to 30 minutes) or Compilation (tracks previously released separately at least 18 months in between).
                                </small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="coverArt">Upload Cover Art</label>
                                <input type="file" name="cover_art" class="form-control-file" id="coverArt" accept=".jpg, .jpeg, .png, .tif, .tiff" onchange="validateCoverArt(this)">
                                <small id="coverArtHelp" class="form-text text-muted">Size: 3000x3000 to 5000x5000 pixels (perfect square). Format: JPG, TIFF or PNG. Max file size: 36 MB.</small>
                                <div id="coverArtError" class="invalid-feedback"></div>
                            </div>
                            <div class="col-md-6">
                                <div id="imagePreview" class="text-center"></div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <label for="primary_genre">Primary Genre</label>
                                <input type="text" class="form-control" name="primary_genre" placeholder="Write here" required>
                                <small class="form-text text-muted">
                                    Select the music category that best describes the content of this release. Use the most specific genre that applies rather than a generic one.
                                </small>
                            </div>
                            <div class="form-group col-md-5">
                                <label for="secondary_genre">Secondary Genre (optional)</label>
                                <input type="text" class="form-control" name="secondary_genre" placeholder="Write here">
                                <small class="form-text text-muted">
                                    Select a secondary genre to add more information about the content of this release, if applicable.
                                </small>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <label for="upc_ean">UPC / EAN</label>
                                <input type="text" class="form-control" name="upc_ean" placeholder="Write here">
                                <small class="form-text text-muted">
                                    Indicate the UPC (Universal Product Code) or EAN (European Article Number) code that identifies this release within a digital or physical shop, or request a new one. This is a 12-14 digit alphanumeric code.
                                </small>
                            </div>
                        </div>

                        <div class="buttons row" style="padding-bottom:20px">
                            <div class="col">
                                <button type="submit" class="btn btn-primary next_button">@lang('messages.next_step_button')</button>
                            </div>
                            <div class="col">
                                <button type="submit" name="save" value="save_as_draft" class="btn btn-secondary">@lang('messages.save_as_draft_button')</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-control {
        line-height: 2;
    }

    label {
        font-size: 13px;
        margin-top: 15px;
    }

    .invalid-feedback {
        display: block;
        width: 100%;
        margin-top: .25rem;
        font-size: 80%;
        color: #dc3545;
    }

    .custom-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        border-radius: 5px;
        cursor: pointer;
        border: none;
    }

    .custom-button:hover {
        background-color: #45a049;
    }
</style>

<script>
    function validateCoverArt(input) {
        const file = input.files[0];
        const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/tiff', 'image/tif'];
        const maxSize = 36 * 1024 * 1024;
        const minWidth = 3000;
        const maxWidth = 5000;

        const errorDiv = document.getElementById('coverArtError');
        errorDiv.textContent = '';
        input.classList.remove('is-invalid');

        if (!file) {
            errorDiv.textContent = 'Please select a file.';
            input.classList.add('is-invalid');
            return;
        }

        if (!allowedTypes.includes(file.type)) {
            errorDiv.textContent = 'Only JPG, TIFF or PNG files are allowed.';
            input.classList.add('is-invalid');
            input.value = '';
            return;
        }

        if (file.size > maxSize) {
            errorDiv.textContent = 'File size exceeds 36 MB.';
            input.classList.add('is-invalid');
            input.value = '';
            return;
        }

        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                const width = this.width;
                const height = this.height;

                if (width < minWidth || width > maxWidth || height < minWidth || height > maxWidth || width !== height) {
                    errorDiv.textContent = 'Image dimensions must be a perfect square between 3000x3000 and 5000x5000 pixels.';
                    input.classList.add('is-invalid');
                    input.value = '';
                    return;
                }

                displayImagePreview(e.target.result);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }

    function displayImagePreview(imageSrc) {
        const previewDiv = document.getElementById('imagePreview');
        previewDiv.innerHTML = `<img src="${imageSrc}" class="img-thumbnail mt-2" style="max-width: 100%; max-height: 240px;" alt="Cover Art Preview">`;
        document.getElementById('coverArtRequirements').style.display = 'none';
    }
</script>

@endsection