@extends('layouts.master')

@section('content')

<div class="container mx-auto px-4 py-6">

    <h1 class="text-3xl font-bold mb-6">

        Certificate Designer

    </h1>

    <div class="bg-white shadow rounded p-6">

        <h2 class="text-xl font-bold mb-4">

            {{ $certificate_template->template_name }}

        </h2>

        <form method="POST"
              action="{{ route('certificate-templates.update',$certificate_template->id) }}">

            @csrf
            @method('PUT')

            <div class="overflow-x-auto">

                <table class="w-full">

                    <thead class="bg-gray-100">

                        <tr>

                            <th>Field</th>
                            <th>Top</th>
                            <th>Left</th>
                            <th>Width</th>
                            <th>Font</th>
                            <th>Size</th>
                            <th>Color</th>

                        </tr>

                    </thead>

                    <tbody>

                        @foreach($certificate_template->fields as $field)

                        <tr class="border-b">

                            <td>

                                {{ $field->field_name }}

                            </td>

                            <td>

                                <input type="number"
                                    name="fields[{{ $field->id }}][top_position]"
                                    value="{{ $field->top_position }}"
                                    class="border p-1 w-24">

                            </td>

                            <td>

                               <input type="number"
                                    name="fields[{{ $field->id }}][left_position]"
                                    value="{{ $field->left_position }}"
                                    class="border p-1 w-24">
                            </td>

                            <td>

                               <input type="number"
                                    name="fields[{{ $field->id }}][width]"
                                    value="{{ $field->width }}"
                                    class="border p-1 w-24">

                            </td>

                            <td>

                              <input type="text"
                                    name="fields[{{ $field->id }}][font_family]"
                                    value="{{ $field->font_family }}"
                                    class="border p-1">

                            </td>

                            <td>
                                <input type="number"
                                    name="fields[{{ $field->id }}][font_size]"
                                    value="{{ $field->font_size }}"
                                    class="border p-1 w-20">
                            </td>

                            <td>

                             <input type="color"
                                    name="fields[{{ $field->id }}][font_color]"
                                    value="{{ $field->font_color }}">

                            </td>

                        </tr>

                        @endforeach

                    </tbody>

                </table>

            </div>

            <div class="mt-6">

                <button type="submit"
                        class="bg-blue-600 text-white px-5 py-2 rounded">

                    Save Design

                </button>

            </div>

        </form>

    </div>

</div>

@endsection