@extends('layouts.admin.app')

@section('title', translate('messages.colors'))

@section('content')
    <div class="content container-fluid">
        <div class="page-header">
            <h1 class="page-header-title">
                <span class="page-header-icon">
                    <i class="tio-palette"></i>
                </span>
                <span>{{ translate('messages.colors') }}</span>
            </h1>
        </div>

        <div class="row g-3">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">{{ translate('messages.add_new_color') }}</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.color.store') }}" method="post">
                            @csrf
                            <div class="form-group">
                                <label class="input-label" for="color_name">{{ translate('messages.name') }} <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="color_name" class="form-control" value="{{ old('name') }}" placeholder="{{ translate('messages.ex_:_Red') }}" required>
                            </div>
                            <div class="form-group">
                                <label class="input-label" for="color_code">{{ translate('messages.color_code') }} <span class="text-danger">*</span></label>
                                <div class="d-flex gap-2">
                                    <input type="color" class="form-control p-1 max-w-80px" value="{{ old('code', '#000000') }}" onchange="document.getElementById('color_code').value = this.value.toUpperCase()">
                                    <input type="text" name="code" id="color_code" class="form-control" value="{{ old('code') }}" placeholder="#FF0000" required>
                                </div>
                            </div>
                            <div class="btn--container justify-content-end">
                                <button type="reset" class="btn btn--reset">{{ translate('messages.reset') }}</button>
                                <button type="submit" class="btn btn--primary">{{ translate('messages.submit') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header py-2 border-0">
                        <div class="search--button-wrapper">
                            <h5 class="card-title">
                                {{ translate('messages.color_list') }}<span class="badge badge-soft-dark ml-2">{{ $colors->total() }}</span>
                            </h5>
                            <form class="search-form">
                                <div class="input-group input--group">
                                    <input value="{{ request('search') }}" type="search" name="search" class="form-control" placeholder="{{ translate('messages.ex_:_color_name_or_code') }}">
                                    <button type="submit" class="btn btn--secondary"><i class="tio-search"></i></button>
                                </div>
                            </form>
                            @if(request('search'))
                                <a href="{{ route('admin.color.index') }}" class="btn btn--primary ml-2">{{ translate('messages.reset') }}</a>
                            @endif
                        </div>
                    </div>
                    <div class="table-responsive datatable-custom">
                        <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                            <thead class="thead-light">
                                <tr class="text-center">
                                    <th>{{ translate('sl') }}</th>
                                    <th>{{ translate('messages.name') }}</th>
                                    <th>{{ translate('messages.color_code') }}</th>
                                    <th>{{ translate('messages.status') }}</th>
                                    <th>{{ translate('messages.action') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($colors as $key => $color)
                                    <tr>
                                        <td class="text-center">{{ $key + $colors->firstItem() }}</td>
                                        <td class="text-center">{{ $color->name }}</td>
                                        <td class="text-center">
                                            <span class="d-inline-flex align-items-center gap-2">
                                                <span class="rounded border d-inline-block" style="width: 24px; height: 24px; background: {{ $color->code }}"></span>
                                                <span>{{ $color->code }}</span>
                                            </span>
                                        </td>
                                        <td class="text-center">
                                            <label class="toggle-switch toggle-switch-sm" for="color-status-{{ $color->id }}">
                                                <input type="checkbox"
                                                    class="toggle-switch-input redirect-url"
                                                    id="color-status-{{ $color->id }}"
                                                    data-url="{{ route('admin.color.status', [$color->id, $color->status ? 0 : 1]) }}"
                                                    {{ $color->status ? 'checked' : '' }}>
                                                <span class="toggle-switch-label">
                                                    <span class="toggle-switch-indicator"></span>
                                                </span>
                                            </label>
                                        </td>
                                        <td>
                                            <div class="btn--container justify-content-center">
                                                <a class="btn action-btn btn--primary btn-outline-primary" href="{{ route('admin.color.edit', $color->id) }}" title="{{ translate('messages.edit') }}"><i class="tio-edit"></i></a>
                                                <a class="btn action-btn btn--danger btn-outline-danger form-alert" href="javascript:" data-id="color-{{ $color->id }}" data-message="{{ translate('Want to delete this color ?') }}" title="{{ translate('messages.delete') }}"><i class="tio-delete-outlined"></i></a>
                                                <form action="{{ route('admin.color.delete', $color->id) }}" method="post" id="color-{{ $color->id }}">
                                                    @csrf
                                                    @method('delete')
                                                </form>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @if($colors->count() !== 0)
                        <hr>
                    @endif
                    <div class="page-area">
                        {!! $colors->links() !!}
                    </div>
                    @if($colors->count() === 0)
                        <div class="empty--data">
                            <img src="{{ asset('/public/assets/admin/svg/illustrations/sorry.svg') }}" alt="public">
                            <h5>{{ translate('no_data_found') }}</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
