@extends('companyuser::layouts.master')
<link href="{{asset('assets/css/style-svgFont.css') }}" rel="stylesheet">
@section('title', __('companyuser::sidebar.Custom Fields'))
@section('breadcrumb')
<div class="row breadcrumbs-top">
    <div class="breadcrumb-wrapper col-xs-12">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{route('company.general-settings.index', $subdomain)}}">{{__('companyuser::sidebar.Settings')}}</a>
            </li>
            <li class="breadcrumb-item active">
                <a href="#">{{__('companyuser::sidebar.Custom Fields')}}</a>
            </li>
        </ol>
    </div>
</div>
@endsection
@section('content')
<style>
    .hide{
        display: none;
    }
    .filter-section-collapse form input:not(.btn),.filter-section-collapse form select{
        height:45px !important;
        border-radius: 5px;
    }
    /* Custom fields table alignment fix */
    .custom-fields-table {
        table-layout: fixed;
        width: 100%;
    }
    .custom-fields-table th:first-child,
    .custom-fields-table td:first-child {
        width: 5%;
        text-align: center;
    }
    .custom-fields-table th:nth-child(2),
    .custom-fields-table td:nth-child(2) {
        width: 25%;
    }
    .custom-fields-table th:nth-child(3),
    .custom-fields-table td:nth-child(3) {
        width: 35%;
    }
    .custom-fields-table th:nth-child(4),
    .custom-fields-table td:nth-child(4) {
        width: 35%;
    }
    .custom-fields-table .form-control,
    .custom-fields-table .select2-container {
        width: 100% !important;
    }
    
    /* Mobile view spacing */
    @media (max-width: 767px) {
        .custom-fields-table {
            table-layout: auto;
        }
        .custom-fields-table th {
            font-size: 0.85rem;
            white-space: normal;
            word-wrap: break-word;
        }
        .custom-fields-table td,
        .custom-fields-table th {
            padding: 1rem 0.5rem !important;
        }
        .custom-fields-table tbody tr {
            border-bottom: 1px solid #e3ebf3;
        }
        .custom-fields-table th:first-child,
        .custom-fields-table td:first-child {
            width: 8%;
        }
    }
</style>
<section id="">
    <div class="container-fluid">
        <div class="headBtns mx-1 fixed-btns">
            <div class="btn-group pull-right">
                <button type="button" class="saveAct" style="background-color: transparent;border:none" title="{{__('Save')}}">
                    <span class="icon-Save action-icon"></span>
                </button>
            </div>
            <div class="mb-1 pull-left">
            </div>
        </div>
        <div class="card add-form-section filter-section-collapse ">
            <div class="card-body">
                <div>
                    @include('companyuser::errors.lists')
                    <ul class="nav nav-tabs nav-linetriangle no-hover-bg nav-justified">
                        @foreach(\Modules\Settings\Enums\CustomFieldsEnum::CUSTOM_FIELDS_NAMES_MAPPING as $feature)
                            @if($loop->first)
                                <li class="nav-item">
                                    <a class="nav-link active" id="active-tab1" data-toggle="tab" href="#active1" aria-controls="active1" aria-expanded="true">{{__('settings::custom_fields.'.$feature)}}</a>
                                </li>
                            @else
                                <li class="nav-item">
                                    <a class="nav-link" id="linkOpt-tab{{$loop->iteration}}" data-toggle="tab" href="#linkOpt{{$loop->iteration}}" aria-controls="linkOpt{{$loop->iteration}}">{{__('settings::custom_fields.'.$feature)}}</a>
                                </li>
                            @endif
                        @endforeach

                    </ul>
                    @if (count($errors) > 0)
                    <div class="alert alert-danger fade in">
                        <div class="error-header">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                            <ul>
                                @foreach (array_unique($errors->all()) as $error)
                                <li>{{ $error}}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    @endif

                    <form action="{{ route('company.custom-fields.store', $subdomain) }}" method="POST" class="form">
                        @csrf
                        <div class="tab-content px-1 pt-1">
                            @foreach(\Modules\Settings\Enums\CustomFieldsEnum::CUSTOM_FIELDS_NAMES_MAPPING as $screen => $value)
                            <div class="tab-pane fade @if($loop->first) active in @endif" @if($loop->first) id="active1" @else id="linkOpt{{$loop->iteration}}" @endif role="tabpanel"
                                aria-labelledby="{{($loop->first) ? 'active-tab1' : 'linkOpt-tab' . $loop->iteration }}" aria-expanded="@if($loop->first) true @else false @endif">
                                <div class="table-responsive">
                                    <table class="table custom-fields-table">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>{{__('settings::custom_fields.Field Type')}}</th>
                                                <th>{{__('settings::custom_fields.Field English Name')}}</th>
                                                <th>{{__('settings::custom_fields.Field Arabic Name')}}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @for ($i = 1; $i <= 5; $i++)
                                            <tr>
                                                <td>{{$i}}</td>
                                                <td>
                                                    @php 
                                                        $custom_field_screen = "data[$screen]" . "[$i]";
                                                    @endphp
                                                    <select class="select2 form-control w-auto {{ ($errors->has($custom_field_screen . '[field_type]') ? ' is-invalid':'') }}" name="{{ $custom_field_screen . '[field_type]' }}">
                                                        <option value="">@lang('settings::custom_fields.Select field type')</option>
                                                        @foreach (\Modules\Settings\Enums\CustomFieldsEnum::translatedDataTypesList() as $value => $type)
                                                            <option @if(isset($customFields[$screen][$i -1]['type']) && $customFields[$screen][$i -1]['type'] == $value) selected @endif value="{{$value}}">{{$type}}</option>
                                                        @endforeach
                                                    </select>
                                                    @error($custom_field_screen . '[field_type]')
                                                        <span class="invalid-feedback text text-danger" role="alert">
                                                            <p>{{ $message }}</p>
                                                        </span>
                                                    @enderror
                                                </td>
                                                <td>
                                                    <input 
                                                        type="text" 
                                                        name="{{$custom_field_screen . '[name_en]'}}" 
                                                        value="{{ $customFields[$screen][$i -1]['name_en'] ?? '' }}"
                                                        class="form-control w-auto {{ ($errors->has($custom_field_screen. '[name_en]') ? ' is-invalid':'') }}"
                                                    >
                                                    @error($custom_field_screen. '[name_en]')
                                                        <span class="invalid-feedback text text-danger" role="alert">
                                                            <p>{{ $message }}</p>
                                                        </span>
                                                    @enderror
                                                </td>
                                                <td>
                                                    <input 
                                                        type="text" 
                                                        name="{{ $custom_field_screen . '[name_ar]' }}" 
                                                        value="{{ $customFields[$screen][$i -1]['name_ar'] ?? '' }}" 
                                                        class="form-control w-auto {{ $errors->has($custom_field_screen . '[name_ar]') ? 'is-invalid' : '' }}"
                                                    >
                                                    @error($custom_field_screen. '[name_ar]')
                                                        <span class="invalid-feedback text text-danger" role="alert">
                                                            <p>{{ $message }}</p>
                                                        </span>
                                                    @enderror
                                                </td>
                                            </tr>
                                            @endfor
                                    </tbody>
                                </table>
                            </div>
                            <div class="row text-center">
                                <input type="submit" value="{{__('Save')}}" class="btnWidth hide btn btn-primary mb-320-2 my-1 saveDraftBtn">
                            </div>
                        </div>
                        @endforeach
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection

@section('extra_scripts')
    <script>
        gtag('event', 'web_settings_custom_fields');
        console.log('web_settings_custom_fields event');
    </script>
<script>
    window.addEventListener('DOMContentLoaded', function() {
        $("body").on("click",".saveAct",function(){
            $(".tab-pane.active").find("input[type *= submit]").trigger("click");
        })

        ref = "{{request()->input('ref ')}}";
        if (ref) {
            tab = document.getElementById(ref)
            if (tab) {
                tab.click()
            }
        }

    })
</script>
@endsection