@extends('layouts.app')

@section('title')
    {{"Update Existing Mapping Code - Tunas Admin Management"}}
@endsection

@section('content')
    <div class="relative flex flex-col justify-center ml-12 bg-transparent rounded-xl">
        <h1 class="block text-xl font-medium text-slate-800">
            Edit Mapping Code
        </h1>
        @if ($errors->any())
            <div class="flex justify-center space-x-8 bg-red-200 alert alert-danger rounded-xl">
                <div class="flex items-center">
                    <svg height="2rem" width="2rem" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink"
                         viewBox="0 0 24 24" xml:space="preserve">
                            <g>
                                <path style="fill:#c73852;" d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12s12-5.373,12-12S18.627,0,12,0z M12,19.66
                                    c-0.938,0-1.58-0.723-1.58-1.66c0-0.964,0.669-1.66,1.58-1.66c0.963,0,1.58,0.696,1.58,1.66C13.58,18.938,12.963,19.66,12,19.66z
                                     M12.622,13.321c-0.239,0.815-0.992,0.829-1.243,0c-0.289-0.956-1.316-4.585-1.316-6.942c0-3.11,3.891-3.125,3.891,0
                                    C13.953,8.75,12.871,12.473,12.622,13.321z"/>
                            </g>
                        </svg>
                </div>
                <div class="flex flex-col justify-center">
                    <h2>Whoops! Sepertinya ada field yang belum diisi.</h2>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        <form action="{{ route('mapping-codes.update', $mapping_code->MOBILE_MAPPING_CODE_ID) }}"
              class="max-w-screen-lg mt-8 mb-2 w-80 sm:w-96"
              method="POST">
            @csrf
            @method('PUT')

            <div class="flex flex-col gap-6 mb-1">
                <div class="w-full max-w-sm min-w-[200px]">
                    <label for="MOBILE_MAPPING_TYPE_ID" class="block mb-2 text-sm text-slate-600">
                        Mapping Type<span class="text-red-600">*</span>
                    </label>
                    <select name="MOBILE_MAPPING_TYPE_ID"
                            id="MOBILE_MAPPING_TYPE_ID"
                            class="w-full px-3 py-2 text-sm transition duration-300 bg-transparent border rounded-md shadow-sm placeholder:text-slate-400 text-slate-700 border-slate-200 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 focus:shadow">
                        @foreach($mapping_types as $mapping_type)
                            <option
                                value="{{ $mapping_type->MOBILE_MAPPING_TYPE_ID }}" {{ $mapping_code->MOBILE_MAPPING_TYPE_ID == $mapping_type->MOBILE_MAPPING_TYPE_ID ? 'selected' : '' }}>{{$mapping_type->mapping->NAME}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="w-full max-w-sm min-w-[200px]">
                    <label for="MOBILE_CODING_ID" class="block mb-2 text-sm text-slate-600">
                        Nama - Coding<span class="text-red-600">*</span>
                    </label>
                    <select name="MOBILE_CODING_ID"
                            id="MOBILE_CODING_ID"
                            class="w-full px-3 py-2 text-sm transition duration-300 bg-transparent border rounded-md shadow-sm placeholder:text-slate-400 text-slate-700 border-slate-200 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 focus:shadow">
                        @foreach($codings as $coding)
                            <option
                                value="{{ $coding->MOBILE_CODING_ID }}" {{ $mapping_code->MOBILE_CODING_ID == $coding->MOBILE_CODING_ID ? 'selected' : '' }}>{{$coding->user?->NAME . ' - ' . $coding->NAME}}</option>
                        @endforeach
                    </select>
                </div>
                <button
                    class="w-full px-4 py-2 mt-4 text-sm text-center text-white transition-all border border-transparent rounded-md shadow-md bg-slate-800 hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                    type="submit">
                    Submit
                </button>
            </div>
        </form>
        <h2 class="block text-xl font-medium text-slate-800">
            Mapping Code Line for {{ $mapping_code->MOBILE_MAPPING_CODE_ID }}
        </h2>
        <div class="flex items-center justify-between">
            <form action="{{ route('mapping-codes.edit', $mapping_code->MOBILE_MAPPING_CODE_ID) }}" method="GET"
                  class="mb-4">
                <div class="flex items-center space-x-4 row">
                    <!-- Search input -->
                    <div class="col-md-4">
                        <input
                            type="text"
                            name="search"
                            class="w-full px-3 py-2 text-sm transition duration-300 bg-transparent border rounded-md shadow-sm placeholder:text-slate-400 text-slate-700 border-slate-200 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 focus:shadow"
                            placeholder="Search Mapping Code Line..."
                            value="{{ request('search') }}"
                        >
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="p-2 bg-gray-300 rounded-md shadow-md btn w-100">Search</button>
                    </div>
                </div>
            </form>
            <div>
                <a href="{{route('mapping-code-lines.create', $mapping_code->MOBILE_MAPPING_CODE_ID)}}"
                   class="w-full px-4 py-2 mt-4 text-sm text-center text-white transition-all border border-transparent rounded-md shadow-md bg-slate-800 hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
                >Tambah</a>
            </div>
        </div>
        <div
            class="relative flex flex-col w-full overflow-scroll text-gray-700 bg-white rounded-lg shadow-md bg-clip-border">
            <table class="w-full text-left table-auto min-w-max">
                <thead>
                <tr>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500">
                            Mapping Code ID
                        </p>
                    </th>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500">
                            Customer
                        </p>
                    </th>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500">
                            Coding Child
                        </p>
                    </th>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500">
                            Coding Parent
                        </p>
                    </th>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500">
                            Created
                        </p>
                    </th>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500">
                            Updated
                        </p>
                    </th>
                    <th class="p-4 border-b border-slate-300 bg-slate-50">
                        <p class="block text-sm font-normal leading-none text-slate-500"></p>
                    </th>
                </tr>
                </thead>
                <tbody>
                @forelse ($mapping_code_lines as $mapping_code_line)
                    <tr class="hover:bg-slate-50">
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_code_line->MOBILE_MAPPING_CODE_ID }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_code_line->customer?->CUSTOMER_NAME }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_code_line->coding_child?->user?->NAME}} - {{ $mapping_code_line->coding_child?->NAME}}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_code_line->coding_parent?->user?->NAME}} - {{ $mapping_code_line?->coding_parent?->NAME }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_code_line->CREATED }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_code_line->UPDATED }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <a href={{ route('mapping-code-lines.edit', $mapping_code_line->MOBILE_MAPPING_CODE_LINE_ID) }} class="block">
                                Edit
                            </a>
                        </td>
                    </tr>
                @empty
                    <div class="alert alert-danger">
                        Data Mapping Code Line belum tersedia.
                    </div>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $mapping_code_lines->links() }}
        </div>
    </div>
@endsection