@extends('tenant.representatives.representative-tabs')
@php
    $activeTab = 'representatives_create';
@endphp
@section('breadcrumb')
    @php
        $breadcrumb_items[ __('breadcrumb.home')] = '/';
        $breadcrumb_items[ __('breadcrumb.representatives')] = route('tenant.representatives.representatives.index');
        $breadcrumb_items[ __('breadcrumb.add')] = '#';
    @endphp

    @include('tenant.layouts.breadcrumb', ['items' => $breadcrumb_items])
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('css/employees/edit.css') }}">
    <link rel="stylesheet" href="{{ asset('css/layouts/custom-tabs.css')}}">
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'representatives.create'])
@endsection

@section('content-field')
    <div class="my-4 ">
        <h4 class="text-center">  @lang('representatives/create.add_new_representative')</h4>

        <form action="{{ route('tenant.representatives.representatives.store') }}" method="post" class="card p-4">
            @csrf

            <div class="row">
                <div class="col-md-6">
                    <div class="my-2">
                        <label for="name" class="rs"> @lang('representatives/create.name')</label>
                        <input type="text" placeholder="{{__('representatives/create.representative_name')}}" id="name" name="name" class="form-control"
                            required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="my-2">
                        <label for="username" class="rs">  @lang('representatives/create.user_name')</label>
                        <input type="text" placeholder="{{__('representatives/create.user_name')}}" id="username" name="username" class="form-control"
                            required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="my-2">
                        <label for="phone" class="rs">  @lang('representatives/create.phone_number')</label>
                        <input type="number" placeholder="{{__('representatives/create.phone_number')}}" id="phone" name="phone" class="form-control"
                            required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="my-2">
                        <label for="commission_rate" class="rs">  @lang('representatives/create.commission_rate')</label>
                        <input type="number" min="0" max="100" id="commission_rate"
                            placeholder="{{__('representatives/create.commission_rate')}}" name="commission_rate" class="form-control"
                            value="{{ request()->old('commission_rate') }}" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="my-2">
                        <label for="password" class="rs">  @lang('representatives/create.password')</label>
                        <input type="password" placeholder="{{__('representatives/create.password')}}" id="password" name="password" class="form-control"
                            required>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="my-2">
                        <label for="password_confirmation" class="rs">  @lang('representatives/create.password_confirmation')</label>
                        <input type="password" placeholder="{{__('representatives/create.password_confirmation')}}" id="password_confirmation"
                            name="password_confirmation" class="form-control" required>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label for="branch_id" class="rs"> @lang('representatives/create.branch')</label>
                    <select name="branch_id" id="branch_id" required>
                        <option value="" disabled selected>  @lang('representatives/create.select_branch')</option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}">{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label for="receivable_id" class="rs"> @lang('representatives/create.receivable')</label>
                    <select name="receivable_id[]" id="receivable_id" required multiple>
                        <option value="" disabled selected>  @lang('representatives/create.select_receivable')</option>
                        @foreach ($receivableAccounts as $receivable)
                            <option value="{{ $receivable->id }}">{{ $receivable->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="permissions-layout">
                        <div class="modules-container col m-auto">

                            <div class="module-layout mb-4 mix sections-representative">
                                {{-- Sections Of Module - Table --}}
                                <div class="sections-layout">
                                    <table class="table table-bordered table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <label for="all-sections-representative">@lang('general.all')</label>
                                                    <input type="checkbox" name="representative"
                                                        class="select-all-sections-btn disabled-search custom-checkbox"
                                                        id="all-sections-representative" checked>
                                                </th>
                                                <th>@lang('representatives/create.section')</th>
                                                <th>@lang('representatives/create.operations')</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            @foreach ($sections as $section)
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" name="sections-representative[]"
                                                            id="section-{{ $section->id }}" class="section-checkbox custom-checkbox"
                                                            value="{{ $section->code }}" checked>
                                                    </td>
                                                    <td>{{ $section->name }}</td>
                                                    <td>
                                                        {{-- Functions Of Section --}}
                                                        <div class="functions-layout d-flex align-items-center">
                                                            <label for="all-functions-{{ $section->code }}"
                                                                class="select-all-functions mx-4 btn"
                                                                title="{{__('general.select_deselect_all')}}"> @lang('general.all')</label>
                                                            <input type="checkbox"
                                                                id="all-functions-{{ $section->code }}"
                                                                class="btn select-all-functions-btn mx-1 d-none" checked>

                                                            <div class="d-flex flex-wrap">
                                                                @foreach ($section->functions as $function)
                                                                    <div class="code-function mx-1">
                                                                        <input type="checkbox"
                                                                            name="functions-{{ $section->code }}[]"
                                                                            id="function-{{ $function->id }}"
                                                                            class="function-checkbox custom-checkbox"
                                                                            value="{{ $function->code }}" checked>
                                                                        <label
                                                                            for="function-{{ $function->id }}">{{ $function->name }}</label>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button type="submit" class="btn orange-btn">@lang('general.add')</button>
                </div>
            </div>
        </form>

    </div>
@endsection
@push('script')
    <script>
        $(() => {
            // hide operations if is not checked
            $(".select-all-sections-btn").on("change", function() {
                $(this)
                    .closest(".module-layout")
                    .find(".section-checkbox")
                    .prop("checked", $(this).prop("checked"));
                if ($(this).prop("checked")) {
                    $(this)
                        .closest(".module-layout")
                        .find(".functions-layout")
                        .css("opacity", 1);
                } else {
                    $(this)
                        .closest(".module-layout")
                        .find(".functions-layout")
                        .css("opacity", 0);
                }
            });
            // hide/show functions if section-checkbox is checked
            $(".section-checkbox").on("change", function() {
                let checked = $(this).prop("checked");
                if (checked) {
                    $(this)
                        .closest("tr")
                        .find(".function-checkbox")
                        .prop("checked", true)
                        .attr("disabled", false);
                    $(this).closest("tr").find(".functions-layout").css("opacity", 1);
                } else {
                    $(this).closest("tr").find(".function-checkbox").prop("checked", false);
                    $(this).closest("tr").find(".functions-layout").css("opacity", 0);
                }
            });

            // make all functions checked or not based on select-all-functions-btn
            $(".select-all-functions-btn").on("click", function() {
                $(this)
                    .closest(".functions-layout")
                    .find(".function-checkbox")
                    .prop("checked", $(this).prop("checked"));
            });

            // change the style of selected functions
            $(".select-all-functions").on("click", function() {
                $(this).toggleClass("all-functions-selected-btn");
            });
        });
    </script>
@endpush