@extends('layouts.app')
@section('title', 'Cheque Format Designer')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('banking.cheque-formats.index') }}">Cheque Formats</a></li>
    <li class="breadcrumb-item active">{{ $format->name }}</li>
@endsection

@push('styles')
<link href="{{ asset('css/cheque-format-designer.css') }}?v={{ filemtime(public_path('css/cheque-format-designer.css')) }}" rel="stylesheet">
@endpush

@section('content')
@if(session('success'))
<div class="alert alert-success alert-dismissible d-flex gap-2 mb-3" style="font-size:13.5px">
    <i class="bi bi-check-circle flex-shrink-0"></i><div>{{ session('success') }}</div>
    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert"></button>
</div>
@endif

<div class="page-header flex-wrap gap-3">
    <div>
        <h1 class="page-title">Cheque Format Designer</h1>
        <p class="page-subtitle mb-0">Drag fields onto the cheque preview, or fine-tune position with the controls below.</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <a href="{{ route('banking.cheque-formats.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left me-1"></i>Back
        </a>
        <button type="button" class="btn btn-primary btn-sm" id="saveChequeFormatBtn">
            <i class="bi bi-save me-1"></i>Save
        </button>
    </div>
</div>

<form id="chequeFormatForm" method="POST" action="{{ route('banking.cheque-formats.update', $format) }}">
    @csrf
    @method('PUT')

    <div class="row g-4">
        <div class="col-12 col-xl-4">
            <div class="card h-100">
                <div class="card-header fw-semibold">Format Settings</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold" for="designName">Name</label>
                        <input type="text" class="form-control" id="designName" name="name"
                               value="{{ old('name', $format->name) }}" required maxlength="100">
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Quick size</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($sizePresets as $preset)
                            <button type="button"
                                    class="btn btn-outline-secondary btn-sm design-size-preset"
                                    data-width="{{ $preset['width'] }}"
                                    data-height="{{ $preset['height'] }}">
                                {{ $preset['width'] }} × {{ $preset['height'] }}
                            </button>
                            @endforeach
                        </div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-6">
                            <label class="form-label fw-semibold" for="designWidth">Width (mm)</label>
                            <input type="number" class="form-control design-dimension" id="designWidth"
                                   name="page_width_mm" value="{{ old('page_width_mm', $format->page_width_mm) }}"
                                   step="0.1" min="50" max="400" required>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold" for="designHeight">Height (mm)</label>
                            <input type="number" class="form-control design-dimension" id="designHeight"
                                   name="page_height_mm" value="{{ old('page_height_mm', $format->page_height_mm) }}"
                                   step="0.1" min="30" max="200" required>
                        </div>
                    </div>

                    <div class="border rounded-2 p-3 mb-3 bg-light">
                        <div class="fw-semibold mb-2" style="font-size:13px">Selected field</div>
                        <div id="selectedFieldHint" class="text-muted" style="font-size:12.5px">
                            Click a field on the preview to adjust it precisely.
                        </div>
                        <div id="selectedFieldControls" class="d-none">
                            <div class="mb-2 fw-semibold" id="selectedFieldLabel" style="font-size:13px"></div>
                            <div class="row g-2 mb-2">
                                <div class="col-4">
                                    <label class="form-label mb-1" style="font-size:12px">X (mm)</label>
                                    <input type="number" class="form-control form-control-sm" id="fieldX" step="0.1" min="0">
                                </div>
                                <div class="col-4">
                                    <label class="form-label mb-1" style="font-size:12px">Y (mm)</label>
                                    <input type="number" class="form-control form-control-sm" id="fieldY" step="0.1" min="0">
                                </div>
                                <div class="col-4">
                                    <label class="form-label mb-1" style="font-size:12px">Font (pt)</label>
                                    <input type="number" class="form-control form-control-sm" id="fieldFont" step="0.5" min="6" max="24">
                                </div>
                            </div>
                            <div class="d-flex gap-1">
                                <button type="button" class="btn btn-outline-secondary btn-sm" data-nudge="left" title="Move left">←</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" data-nudge="up" title="Move up">↑</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" data-nudge="down" title="Move down">↓</button>
                                <button type="button" class="btn btn-outline-secondary btn-sm" data-nudge="right" title="Move right">→</button>
                            </div>
                        </div>
                    </div>

                    <div class="mb-0">
                        <div class="fw-semibold mb-2" style="font-size:13px">Font sizes (pt)</div>
                        @foreach($fieldMeta as $key => $meta)
                        <div class="mb-2">
                            <label class="form-label mb-1" style="font-size:12px">{{ $meta['label'] }}</label>
                            <input type="number"
                                   class="form-control form-control-sm font-size-input"
                                   data-field="{{ $key }}"
                                   name="layout[{{ $key }}][font_size]"
                                   value="{{ old("layout.{$key}.font_size", $format->layout[$key]['font_size'] ?? $meta['font_size']) }}"
                                   step="0.5" min="6" max="24">
                            <input type="hidden" name="layout[{{ $key }}][x]" class="layout-x" data-field="{{ $key }}"
                                   value="{{ old("layout.{$key}.x", $format->layout[$key]['x'] ?? $meta['x']) }}">
                            <input type="hidden" name="layout[{{ $key }}][y]" class="layout-y" data-field="{{ $key }}"
                                   value="{{ old("layout.{$key}.y", $format->layout[$key]['y'] ?? $meta['y']) }}">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-xl-8">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
                    <span class="fw-semibold">Preview</span>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input" type="checkbox" id="snapToGrid" checked>
                        <label class="form-check-label" for="snapToGrid" style="font-size:13px">Snap to 2 mm grid</label>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3" style="font-size:12.5px">
                        Drag each field to where it should print on the cheque leaf. Coordinates are stored in millimetres from the top-left corner.
                    </p>

                    <div class="cheque-designer-scroll">
                        <div id="chequeDesignerStage" class="cheque-designer-stage">
                            <div id="chequeDesignerCanvas" class="cheque-designer-canvas">
                                @foreach($fieldMeta as $key => $meta)
                                @php
                                    $field = $format->layout[$key] ?? $meta;
                                @endphp
                                <div class="cheque-designer-field"
                                     data-field="{{ $key }}"
                                     data-label="{{ $meta['label'] }}"
                                     style="left:{{ $field['x'] }}mm;top:{{ $field['y'] }}mm;font-size:{{ $field['font_size'] }}pt;">
                                    <span class="cheque-designer-field-tag">{{ $meta['label'] }}</span>
                                    <span class="cheque-designer-field-value">{{ $meta['sample'] }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    <div id="chequeCoordinateSummary" class="cheque-coordinate-summary mt-3"></div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
window.chequeFormatDesigner = {
    saveUrl: @json(route('banking.cheque-formats.update', $format)),
    csrf: @json(csrf_token()),
};
</script>
<script src="{{ asset('js/cheque-format-designer.js') }}?v={{ filemtime(public_path('js/cheque-format-designer.js')) }}" defer></script>
@endpush