@extends('layouts.palette-layout')

@section('title', 'Palette Editor')

@section('content')
    <div class="container">
        <div class="mt-5">
            <h1>Palette Editor</h1>
            <div class="form-group">
                <label for="palette-selector">Select a Palette:</label>
                <select id="palette-selector" class="form-control">
                    @foreach($palettes as $palette)
                        <option value="{{ $palette->id }}">{{ $palette->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="mt-3">
                <button id="new-palette" class="btn btn-primary">New Palette</button>
                <button id="export-palette" class="btn btn-secondary">Export Palette</button>
                <button id="import-palette" class="btn btn-secondary">Import Palette</button>
                <input type="file" id="import-file" style="display:none;">
                <button id="rename-palette" class="btn btn-secondary">Rename Palette</button>
                <input type="text" id="rename-palette-name" placeholder="New Palette Name" class="form-control d-inline-block" style="width: auto; border-radius: 0.5rem; text-align: center;">
                <button id="delete-palette" class="btn btn-danger">Delete Palette</button>
            </div>
        </div>

        <div id="new-palette-form" style="display:none;" class="mt-5">
            <h2>Create New Palette</h2>
            <form id="create-palette-form">
                <div class="form-group">
                    <label for="palette-name">Palette Name:</label>
                    <input type="text" id="palette-name" name="name" class="form-control" required>
                </div>
                <button type="submit" class="btn btn-success">Create</button>
            </form>
        </div>

        <div id="add-color-form" style="display:none;" class="mt-5">
            <h2>Add Color to Palette</h2>
            <button id="add-color" class="btn btn-success mb-3"><i class="fas fa-plus"></i> Add Color</button>
            <form id="create-color-form">
                <div id="color-editors" class="row"></div>
            </form>
        </div>

        <button id="save-palette" class="btn btn-success" style="position: fixed; bottom: 20px; right: 20px;">Save</button>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this palette? This action cannot be undone.</p>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirmDeleteCheckbox">
                        <label class="form-check-label" for="confirmDeleteCheckbox">
                            Confirm delete
                        </label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteButton" disabled>Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    @vite(['resources/js/palette-editor.js'])
@endsection