@extends('layouts.app') 
@section('content') 
@section('css')
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<style>
    .color-palette {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .color-palette-item {
        padding: 15px;
        border-radius: 4px;
        color: white;
        text-shadow: 0 1px 1px rgba(0,0,0,0.3);
        display: flex;
        flex-direction: column;
    }
    .color-palette-item span {
        font-weight: bold;
        margin-bottom: 5px;
    }
    .color-palette-item code {
        background: rgba(0,0,0,0.2);
        padding: 2px 5px;
        border-radius: 3px;
        font-size: 12px;
        color: #fff;
    }
</style>
@endsection

<div class="card">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
    </div>

    <div class="card-body">
        <div class="card-block">
                <section class="content">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="box box-primary">
                                <div class="box-body">
                                    @if(session('success'))
                                    <div class="alert alert-success">
                                        {{ session('success') }}
                                    </div>
                                    @endif

                                    <form action="{{ route('theme.update') }}" method="POST">
                                        @csrf
                                        
                                        @foreach([
                                            'primary' => 'Primary',
                                            'primary_hover' => 'Primary Hover',
                                            'secondary' => 'Secondary',
                                            'success' => 'Success',
                                            'info' => 'Info',
                                            'warning' => 'Warning',
                                            'danger' => 'Danger'
                                        ] as $field => $label)
                                        <div class="form-group">
                                            <label>{{ $label }} Color</label>
                                            <div class="input-group colorpicker-component">
                                                <input type="text" name="{{ $field }}_color" 
                                                    value="{{ old($field.'_color', $settings->{$field.'_color'}) }}" 
                                                    class="form-control">
                                                <span class="input-group-addon"><i></i></span>
                                            </div>
                                            @error($field.'_color')
                                                <span class="help-block text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        @endforeach

                                        <div class="form-group">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fa fa-save"></i> Save Changes
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="box box-default">
                                <div class="box-header with-border">
                                    <h3 class="box-title">Color Palette Preview</h3>
                                </div>
                                <div class="box-body">
                                    <div class="color-palette">
                                        @foreach([
                                            'primary_color' => 'Primary',
                                            'primary_hover_color' => 'Primary Hover',
                                            'secondary_color' => 'Secondary',
                                            'success_color' => 'Success',
                                            'info_color' => 'Info',
                                            'warning_color' => 'Warning',
                                            'danger_color' => 'Danger'
                                        ] as $field => $label)
                                        <div class="color-palette-item" style="background-color: {{ $settings->$field }}">
                                            <span>{{ $label }}</span>
                                            <code>{{ $settings->$field }}</code>
                                        </div>
                                        @endforeach
                                    </div>
                                    <hr>
                                    <div class="text-center">
                                        <button class="btn btn-default" id="reset-colors">
                                            <i class="fa fa-refresh"></i> Reset to Defaults
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        </div>
    </div>
</div>

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/3.4.0/js/bootstrap-colorpicker.min.js"></script>
<script>
    $(function () {
        // Initialize color pickers
        $('.colorpicker-component').colorpicker({
            format: 'hex',
            align: 'left'
        });

        // Reset to defaults
        $('#reset-colors').click(function() {
            if(confirm('Are you sure you want to reset all colors to default values?')) {
                $('[name="primary_color"]').val('#3c8dbc').change();
                $('[name="primary_hover_color"]').val('#367fa9').change();
                $('[name="secondary_color"]').val('#222d32').change();
                $('[name="success_color"]').val('#00a65a').change();
                $('[name="info_color"]').val('#00c0ef').change();
                $('[name="warning_color"]').val('#f39c12').change();
                $('[name="danger_color"]').val('#dd4b39').change();
                
                // Trigger color picker update
                $('.colorpicker-component').colorpicker('setValue');
            }
        });
    });
</script>
@endsection 
@endsection